Canvas's 2D context

1. Fill and stroke

(1) FillStyle

(2) Strokestyle

2. Draw a rectangle

(1) FillRect ()

(2) Strokerect ()

(3) Clearrect (): Clears the rectangular area on the canvas

<= "Drawing"  width= "400px"  height= "400px" style = "Background-color: #d1f1ff" ></ Canvas >

1         varDrawing = document.getElementById ("Drawing");2         if(drawing.getcontext) {3             varct = Drawing.getcontext ("2d");4         }5 6Ct.fillstyle = "#ff0000";7Ct.fillrect (10,10,50,50);8 9Ct.fillstyle = "Rgba (0,0,255,0.5)";TenCt.fillrect (30,30,50,50); One  A         Ct.clearrect (40,40,10,10);

3. Draw the Path

(1) Arc (x,y,radius,startangle,endangle,countercockwise)

Draw a circle (x, y), radius, radius, startangle: Start angle, Endangle: End Angle, countercockwise: Turn counterclockwise, false means turn counterclockwise.

(2) ArcTo (X1,y1,x2,y2,radius)

Draw an arc of radius from (x1,y1) to (X2,y2)

(3) Beziercurveto (c1x,c1y,c2x,c2y,x,y)

Bezier curve, detailed look at my svg--Bezier curve blog

(4) LineTo (x, y)

Draw a line from the previous point to (x, y)

(5) MoveTo (x, y)

Move a drawing cursor to (x, y)

(6) Quadraticcurveto (cx,cy,x,y)

Draw two curves to (x, y) to (Cx,cy) as Control points

(7) Rect (x,y,width,height)

Draw a rectangle starting at (x, y)

4. Drawing text

Font: Text style, size, font

TextAlign: Text alignment (Start,end,left,right,center)

Textbaseline: Baseline of text

　　Ct.filltext ("text", 100,20):

5. Transformations

Rotate (): Rotate

Scale (): Scaling

Translate (x, y): Move to (x, y)

Transform ():

SetTransform ():

1 Ct.beginpath ();2     //Outer Circle3Ct.arc (100,100,99,0, 2*math.pi,false);4 5     //Inner Circle6Ct.moveto (194,100);7Ct.arc (100,100,94,0, 2*math.pi,false);8 9Ct.translate (100,100);Ten     //Rotate One     ct.rotate (90*math.pi/180); A  -Ct.moveto (0,0); -Ct.lineto (0,-85); the  -Ct.moveto (0,0); -Ct.lineto ( -65,0); -  +Ct.stroke ();

This is after 90 degrees of rotation

6. Drawing Images

1 var New Image (); 2     IMG.SRC = "Share1.jpg"; 3 4     Ct.drawimage (IMG, 0,0,120,120);

7. Shadows

Shadow total of four property settings:

Shadowcolor: Shadow Color

Shadowblur: number of blurred pixels

Shadowoffsetx: Shadow Offset

Shadowoffsety: Shadow Offset

1     //Set Shadow2Ct.shadowcolor= "Rgba (0,0,0,0.5)";3Ct.shadowblur = 4;4Ct.shadowoffsetx = 5;5Ct.shadowoffsety = 5;6 7     //Red Rectangle8Ct.fillstyle= "#ff0000"9Ct.fillrect (10,10,50,50);Ten  One     //Blue Rectangle ACt.fillstyle= "Rgba (0,0,255,1)" -Ct.fillrect (30,30,50,50); -Ct.stroke ();

8. Gradients

Gradients are represented by canvasgradient instances.

Create a linear gradient: createlineargradient (x,y,_x,_y)

Create a linear gradient: createradialgradient (X,y,radius,_x,_y,_radius)

(1) Linear gradient:

1     //Red Rectangle2Ct.fillstyle= "#ff0000"3Ct.fillrect (10,10,50,50);4 5     //Gradient Gradient Rectangle6     varGradient = Ct.createlineargradient (30,30,70,70);7Gradient.addcolorstop (0, "white");8Gradient.addcolorstop (1, "BLACK")9 Tenct.fillstyle=gradient; OneCt.fillrect (30,30,50,50); ACt.stroke ();

1     //a gradient function for better positioning2     functioncreaterectlineargradient (context,x,y,width,height) {3         returnContext.createlineargradient (x,y,x+width,y+height);4     }5 6     //Gradient Gradient Rectangle7     varGradient = Createrectlineargradient (ct,30,30,50,50);8Gradient.addcolorstop (0, "white");9Gradient.addcolorstop (1, "BLACK")Ten  Onect.fillstyle=gradient; ACt.fillrect (30,30,50,50); -Ct.stroke ();

(2) Radial gradient:

The first three parameters are the center and radius of the start circle, and the last three parameters are the center and radius of the end circle

1     //Red Rectangle2Ct.fillstyle= "#ff0000"3Ct.fillrect (10,10,50,50);4 5 6     //Radial Gradient7     varGT = Ct.createradialgradient (55,55,10,55,55,30);8Gt.addcolorstop (0, "white");9Gt.addcolorstop (1, "BLACK");TenCt.fillstyle =gt; OneCt.fillrect (30,30,50,50);

9. Gradients

Gradients are represented by canvasgradient instances.

Create a linear gradient: createlineargradient (x,y,_x,_y)

Create a linear gradient: createradialgradient (X,y,radius,_x,_y,_radius)

(1) Linear gradient:

Canvas's 2D context