HTML5 Canvas Learning

Canvas

First, add the canvas label to the HTML page

<canvas id= "Canvas" width= "1024x768" height= "742" display= "block" ></canvas>

Window.onload=function () {

var Canvas=document.getelementbyid ("Canvas");

You can also specify width,height directly here, which not only represents a wide height, but also represents the precision

canvas.width=1024, ...

var Context=canvas.getcontext ("2d");

Context.moveto (100,100);

Context.lineto (700,700);

Context.lineto (100,700);

Context.lineto (100,100);

context.linewidth=5;

Context.strokestyle= "#aabbcc";

Context.stroke ();//The drawing of triangles is done here
}

If you want to fill the graphic, do not use a stroke,

Code:

Context.fillstyle ("#aabbcc");

Context.fill ();

In the drawing process, the careful scholar will find that when drawing two graphics, the style ultimately depends on the last brush style, then how can solve this problem? Context.beginpath () and Context.closepath () are used.

Context.beginpath ()

Context.moveto (100,100);

Context.lineto (700,700);

Context.lineto (100,700);

Context.closepath ();

So you can make sure that the enclosing shape changes only once.

Context.lineto (100,100);

After learning to draw a line, what is the function of drawing an arc?

Context.arc (center x Point, center y Point, Radius, radian start value, Arc end value, false)//The last parameter indicates whether to draw clockwise or counterclockwise, by default false, drawn clockwise.

HTML5 Canvas Learning