The base of the canvas is used.

Directory:

Create a canvas.

Draw lines, polygons, and Tangram.

Draws arcs and circles.

(Some figures are too wide to be squeezed.) You can go to the album "Canvas used to figure." "Look at the original. ）

Create a canvas.

New tags for HTML5 <canvas></canvas>

When used, the ID is added and the canvas element is obtained by ID to draw the operation.

<id= "Canvas"></canvas>

You can add styles. When you do not specify a wide height, the default is 300px*150px.

<id= "Canvas"  style= "border:1px solid #aaa;d Isplay:block;margin : 50px auto; " ></ Canvas >

Specifies that the canvas size is specified by the Width property and the height property of the canvas label, not by CSS, and that no units are specified.

<id= "Canvas"  width= "1024x768"  height= "768" ></ Canvas >

Use JavaScript to get the canvas and get the context of the drawing through GetContext.

var canvas = document.getElementById (' canvas '); var context = Canvas.getcontext (' 2d ');  // draw using the context

In addition to specifying the size of the canvas within the tag, you can specify it in JS.

canvas.width=1024; Canvas.height= 768;

The following two methods are available when the browser does not support canvas.

< Canvas > The current browser does not support canvas, please change the browser and try again. </ Canvas >

(The contents of the canvas tag are ignored by the browser when the browser supports canvas)

Or

var canvas = document.getElementById ("canvas"); if (Canvas.getcontext ("2d")) {    var context = Canvas.getcontext ("2d");} Else {    alert ("The current browser does not support canvas, please change the browser and try again.") ")}

What to use:

Canvas.width

Canvas.height

Canvas.getcontext ()

draw lines, polygons, and Tangram.

Context.moveto (100,100); Context.lineto (200,200); Context.stroke ();

These three lines of code can be implemented to draw a straight line.

MoveTo, which is equivalent to placing strokes at coordinates 100,100. LineTo, it is from 100,100 draw to 200,200 position. At this point the line has not been drawn, using the Context.stroke () method to draw it out. (The coordinates here are relative to the <canvas>.) The top-left corner of <canvas> is the origin of the coordinates. ）

MoveTo and LineTo are both drawing state settings, and Stroke () is drawing.

In addition to the Moveto,lineto these two state settings. And also:

LineWidth. The width of the line.

Strokestyle. Line style (color), the format of the string.

Context.linewidth = 5= ' Blue ';

Write the state before writing the drawing.

Draw multiple line segments. You just need to pick up the LineTo ().

Context.lineto (100,200);

When the coordinates of the last LineTo () are the same as the coordinates of the MoveTo (), the polygons can be realized.

Context.lineto (100,100);

Rectangle, trapezoid, five-star shape and so on.

Stroke () is the main draw line.

Shading a polygon, state: FillStyle, drawing method: Fill ()

Context.fillstyle = ' rgb (30,60,90) '; Context.fill ();

Draw the path and color:

var canvas = document.getElementById (' canvas '=+; var context = Canvas.getcontext (' 2d ');
Context.moveto (100,100); Context.lineto (200,200); Context.lineto (100,200); Context.lineto (100,100= ' rgb (30,60,90) '= 5= ' Blue '; Context.stroke ();

When you draw a second segment/polygon, you only need to recall moveto ().

Context.moveto (200,100); Context.lineto (250,250= ' red '; Context.stroke ();

Question: Why are two lines of color, the same thickness?

Answer: The canvas's drawing is state-based, and when the stroke () method of the second segment is called, the state of the first segment still works, (both the triangle and the second segment are drawn), The Strokestyle of the second segment covers the Strokestyle of the first segment.

Separate the states of the two segments by means of Beginpath (), called before the path is defined (MoveTo ()). Accordingly, after the path definition is complete, use Closepath ().

What to use:

Context.moveto (X1,Y1)

Context.lineto (X2,y2)

Context.beginpath ()

Context.closepath ()

Context.linewidth

Context.strokestyle

Context.fillstyle

Context.stroke ()

Context.fill ()

Draw Tangram.

<id= "Canvas"  style= "border:1px solid #aaa;d Isplay:block;margin: 50px auto; " >     The current browser does not support canvas, please change your browser and try again.  </canvas>

varTangram =[{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color: ' Red '}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color: ' Orange '}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color: ' Yellow '}, {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color: ' Green '}, {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color: ' LightBlue '}, {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color: ' Blue '}, {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color: ' Purple '}]window.onload=function(){    varCanvas = document.getElementById (' Canvas '); Canvas.width= 800; Canvas.height= 800; varcontext = Canvas.getcontext (' 2d ');  for(vari=0;i<tangram.length;i++) {Draw (Tangram[i],context); }}functionDraw (piece, ctx) {Ctx.beginpath (); Ctx.moveto (piece.p[0].x,piece.p[0].y);  for(vari=1;i<piece.p.length;i++) {Ctx.lineto (PIECE.P[I].X,PIECE.P[I].Y);    } ctx.closepath (); Ctx.fillstyle=Piece.color;    Ctx.fill (); Ctx.strokestyle= ' Pink '; Ctx.linewidth= 3; Ctx.stroke ();}

draws arcs and circles.

Context.arc (x,y,radius,startingangle,endingangle,anticlockwise=false)

Draws an arc. The parameters are the coordinates of the center x, y, radius radius of the circle, the beginning of the Radian value, the end of the Radian value, clockwise rotation/counterclockwise rotation (false means clockwise rotation, true means counterclockwise rotation).

Radian/Angle.

The radian is constant, whether clockwise/counterclockwise.

The following is the clockwise angle.

Draw 3/4 circles. Arc () is also a status setting. When the last parameter is not filled, the default is False, which is clockwise.

Context.linewidth = 5; Context.strokestyle= ' Blue '; Context.arc (150,150,100,0,1.5*MATH.PI);  Center Point (150,150), RADIUS 100, from 0 radians to 1.5PI radians. Context.stroke ();

When the last parameter is set to True.

Context.arc (150,150,100,0,1.5*math.pi,true);

Draws a multi-segment arc.

Context.linewidth = 5; Context.strokestyle= ' Blue ';  for (var i=0;i<10;i++) {    context.beginpath ();    Context.arc (50+i*100,60,40,0,2*math.pi* (i+1)/10);     Context.closepath ();    Context.stroke ();}

Question: Why is the beginning and end of the arc connected by a straight line?

Answer: This is another function of Closepath (). When the currently drawn path is not a closed path, Closepath () is used to automatically connect the closed path to the end of the line.

The above code does not use Closepath () will not be connected:

Use Closepath () and draw in a counterclockwise direction:

Do not use Closepath () and draw in a counterclockwise direction:

Fill processing. Strokestyle changed to FillStyle. Stroke () changes to fill (). And the effect of Closepath ():

Remove Closepath ():

Note: Closepath () does not work for fill (). When fill () is called, no matter whether you call Closepath (), the non-enclosing content is automatically and re-populated.

What to use:

Context.arc (X,y,radius,startingangle,endingangle,anticlockwise=false)

The base of the canvas is used.