Canvas labels for learning notes in HTML 5

Canvas is a canvas API in HTML5 to help you quickly draw images in your browser.

What is canvas?

HTML5 <canvas> elements can be used to draw graphical images by using scripts. <Canvas> elements are just a container of graphics. You must use scripts to draw images.

A canvas is an HTML-defined area that can be drawn and has attributes such as height and width.

Canvas has several ways to draw paths, rectangles, circles, characters, and add images.

Browser support

Ie9, Firefox, opera, chrome, and Safari 5 both support this <canvas> element.

Note: IE8 and earlier versions do not support the Canvas Element.

 

Object methods:Http://www.w3cschool.cn/dom_obj_canvasrenderingcontext2d.html

Instance:

How to Use the Canvas Element to display a red rectangle:

<canvas id="myCanvas" width="500" height="300"></canvas>

Use JavaScript to draw, and all the drawings are completed in JavaScript. As follows:

<SCRIPT type = "text/JavaScript"> var c = document. getelementbyid ("mycanvas"); // use the ID to locate the <canvas> Object var CTX = C. getcontext ("2D"); // create a context object
// The getcontext ("2D") object is based on an HTML5 built-in object. It uses many methods to draw straight lines, rectangles, circles, characters, and images.
// Fillstyle makes the rectangle color dark black. fillrect is used to specify the shape, position, and size of the rectangle. CTX. fillstyle = "#202020"; // two rows are used to draw a black rectangle CTX. fillrect (,); // The fillrect attribute has parameters (, 75 ). It means to draw a x 75 rectangle from the top left (0, 0) Coordinate </SCRIPT>

 

Draw a straight line:

<SCRIPT type = "text/JavaScript"> var c = document. getelementbyid ("mycanvas"); var CTX = C. getcontext ("2D"); // The moveTo () method sets the current position to (x, y) and creates a new sub-path as the first vertex. If there is a sub-path and it contains the point above, delete the sub-path from the path.
CTX. moveTo (10, 10); // The lineto () method adds a straight line to the current sub-path. This line starts from the current point and ends with (x, y. When the method returns, the current vertex is (x, y ).
CTX. lineto (150, 10 );
CTX. lineto (50,80); CTX. lineto (250,80 );
// Draw the border of the current path using the stroke () method. Path-defined geometric lines are generated, but line visualization depends on attributes such as strokestyle, linewidth, linejoin, linecap, and miterlimit. CTX. Stroke (); </SCRIPT>

Draw a circle:

<SCRIPT type = "text/JavaScript"> var c = document. getelementbyid ("mycanvas"); var CTX = C. getcontext ("2D"); CTX. fillstyle = "#202020 ";
// Beginpath () discards any defined path and starts a new path. It sets the current vertex to (0, 0 ). When a canvas environment is created for the first time, the beginpath () method is explicitly called.

CTX. beginpath ();
// The first five parameters of this method specify a starting point and ending point of the circumference. Call this method to add a straight line between the current point and the start point of the current sub-path. Next, it adds an arc between the starting point and ending point of the sub-path along the circumference. CTX. ARC (170,180, 80, 0, math. Pi * 2, true );
// If the sub-path of the canvas is open, closepath () is closed by adding a line to connect the current point and the starting point of the sub-path. If the sub-path is closed, this method will not do anything. CTX. closepath ();
// The fill () method fills the current path with the color, gradient, and mode specified by the fillstyle attribute. Each sub-path of this path is filled separately. Any unclosed sub-path is filled, as if the closepath () method has been called for it (however, note that the sub-path is not actually closed ). CTX. Fill (); </SCRIPT>

Draw the gradient effect:

<SCRIPT type = "text/JavaScript"> var c = Document. getelementbyid ("mycanvas"); var CTX = C. getcontext ("2D ");
// Create a linear color gradient using the createlineargradient () method. Createlineargradient (Xstart,Ystart,Xend,Yend);
VaR GRD = CTX. createlineargradient (275,180 );
// Addcolorstop () provides a method to describe the color variation in the gradient. This method can be called once or multiple times to change the color of a specific percentile between the start point and end point of the gradient.
GRD. addcolorstop (0, "#000000 ");
GRD. addcolorstop (1, "#909090 ");
CTX. fillstyle = GRD;
CTX. fillrect (450,250 );
</SCRIPT>

Draw an image:

<SCRIPT type = "text/JavaScript"> var c = document. getelementbyid ("mycanvas"); var CTX = C. getcontext ("2D"); var IMG = new image (); IMG. onload = function (){
// The rawimage () method has three variants. The first deformation copies the entire image to the canvas, places it in the upper-left corner of the specified point, and maps each image pixel to a unit of the canvas coordinate system. The second deformation also copies the entire image to the canvas, but allows you to use the canvas unit to specify the width and height of the desired image. The third deformation is completely universal. It allows you to specify any rectangular area of the image and copy it to scale any position in the canvas. CTX. drawimage (IMG, 105,105) ;}; IMG. src = "assets/gbin1.jpg"; </SCRIPT>