For details, HTML5 Canvas Common API Summary (2)-Drawing API

Canvas can draw many wonderful styles and beautiful effects. Through a few simple APIs, you can present a ever -changing effect on the canvas. You can also make web games. Next, summarize the API related to drawing.

When painting, Canvas is equivalent to fabrics, and Context is equivalent to brushes.

Moveto (X0, Y0): Move the current brush (ICTX) to this position (X0, Y0).

LineTo (X1, Y1): Draw a straight line from the current position (x0, y0) to (X1, Y1).

beginpath (): Open a path or reset the current path.

Closepath (): Back to the starting point of the path from the current point, that is, the position of the previous Beginpath, avoid and path.

stroke (): Draw. This function must be added to draw pictures, so this must be placed at the end.

 var iCanvas = document.GetelementByid (icanvas); var ICTX = iCanvas.getContext (2D); IctX.Beginpath (); ICTX.MOVETO (0,0); 300,150 (300,150); ICTX.Lineto (3,150); ICTX .closepath (); ICTX.Stroke ();

Effect:

Note here that if Closepath is placed behind the Stroke function, it will not be drawn into a closed line, because it is drawn before closed, so the straight line on the left will not be drawn.

LINECAP: Line endpoint style, butt, rand, square.

Linejoin: The turning point style when the two lines are intersecting. When set to Miter, you can also set the maximum length at the junction of the inflection point through Miterlimet.

Miterlimet: If the length of the sediment exceeds the value of Miterlimit, the corner will be displayed in the BeVEL type of LineJoin.

LineWidth: line width

Strokestyle: line color, gradient (defined gradient object), mode. context.Strokesty =#333;

 var iCanvas = Document.GetelementByid (iCanvas); var ICTX = iCanvas.getContext (2D); ICTX.BEGINPATH (); ICTX.StRokestyle =#0000FF; ICTX.LINEWIDTH = 20; ICTX.LINECAP = Round; ICTX.MOVETO (10 , 10); ICTX.Lineto (80,80); IctX.Stroke (); IctX.Beginpath (); // Here must be beginpath, otherwise the first session will always be based on the last stroke, when It will draw a black diagonal again, a total of 3 lines. ICTX.Strokestyle =#000000; ICTX.LineCap = Butt; IctX.LineWidth = 10; ICTX.MOVETO (80,10); ICTX.Lineto (10,80); ictx.Stroke ();

Beginpath and Closepath can not appear in pairs. There is almost nothing to do between the two. Closepath is used to close the end point and start a closed path.

ARC (X, Y, Radius, Startangle, Endangle, AnticLockwise): Draw curve, Radius is a curve radius, startangle, endangle starting angle and ending angle, with arc (math.pi/180)*angle value, Anticlockw ISE drawing direction Items

ARCTO (X1, Y1, X2, Y2, Radius): Draw the curve before the two cut lines.

 ICTX.BEGINPATH (); ICTX.MOVETO (20,20); // Create the starting point ICTX.Lineto (100,20); // Create a horizontal line ICTX.ARCTO (150,20,150,70,50); // Create arcs ICTX.Lineto (150,120); // Create the vertical line ICTX.Stroke ();

Draw the connection of the starting point and horizontal end point of the horizontal line to the end point of the setting of the horizontal line.

QuadraticCurveto (X1, Y1, X2, Y2): Two Bessel curve. (X1, Y1) The coordinates of the control point, (X2, Y2) the coordinates of the end point

BezierCurveto (X1, Y1, X2, Y2, X, Y): Three Bessel curves. (X1, Y1) The coordinates of the control point 1, (x2, y2) control point 2 coordinates (x, y) end points.

The Bessel curve is very useful when drawing some very smooth curves.

RECT (): Create rectangle;

filect (x, y, width, height): Draw the filled rectangle: (x, y) starting point, width, height rectangular width height height height height height height

strokerect (): Draw a rectangular wire frame

Clearrect (): Clear the rectangle.

 ICTX.FillStyle =#0000ff; // Set the color of the filling color ICTX.FILLRCT (20,20,150,100); ICTX.Strokerect (180,20,100,100);

FillStyle: Set the color, gradient or pattern (Patten);

strokestyle: color, gradient or pattern of brush

shadowcolor: shadow yanse

shadowblur: blurred level

ShadowOffsetx: Horizontal distance of shadow

ShadowOffsety: Vertical distance of shadow

 ICTX.SHADOWBLUR = 20; ICTX.SHADOWCOLOR =#456; ICTX.ShadowOffset 97; ICTX.FillRect (20,20,100,80 ); ICTX.Stroke ();

CreateLineArgradient (X1, Y1, X2, Y2): Draw linear gradient, (x1, y1) is the starting point of gradient, (x2, y2) is the end point of gradient. The different positions can make vertical or horizontal gradients.

CreateradialGradient (X1, Y1, R1, X2, Y2, R2): radial gradient: (x1, y1) is the starting point of the gradient, R1 is the radius, (x2, y2) is the end point of the gradient, R2 is the end point radius;

Both grades need to be used

Addcolorsstop (Stop, Color) is set to set the gradient process, and the value is 0.0 to 1.0.

 var grD = ICTX.CREATELINEARADIENT (0,0,170,0); grd.addcolorsstop (0,#000); grd.addcolorsstop (0.5,#378923); grd.addcolorstop (1,#ddd); ICTX .fillStyle = GRD; // The gradient here is an object, which is used to pass value to Fillstyle. Ictx.fillrect (20,20,150,100); var 5); GRD.ADDCOLORSTOP (1 ,#FFF); ICTX.FILLSTYLE = grd; ICTX.FILLRCT (200,150,150,100);

CreatePattern (Image, Repeat | Repeat-X | Repeat-Y | No-Repeat): Image is a picture object, and the subsequent parameters are used to set the repetitive method of the picture.

fill (): Fill the current path.

ispointinpath (): ICTX.ISPOINTINPATH (x, Y); determine whether this point is located on the current path

Remove the canvas: Get the width and height of the canvas, iCanvas.Height, iCanvas.Width; then use clearrect ();

Modify the width of the canvas: icanvas.width = '200'; icanvas.width = '300'.

GlobalPha: Set the transparency, only 0 ~ 1 number. If the transparency is different, re -set it before drawing the second.

TODATAURL: iCanvas.Todataurl (Type, ENCDEROPTIONS), this function returns a URI of an image64 in Image, parameters are available, Type can set image types such as Image/JPEG, Image/Webp, default is image/p default ng; Encoderoptions is A 0 ~ 1 number is used to set the picture quality of Image/JPEG, Image/Webp, and Type in other formats set this parameter is invalid.

CLIP (): The canvas of any shape and size from the canvas, and then all the drawings will be limited to the tailoring area. This method is usually used with paths such as rectangular, round shapes. After these methods, this image is cut, and later the drawing must be drawn on the shear canvas.

 ICTX.ARC (100,100,50, (math.pi/180)*0, (math.pi/180)*360, true); IctX.Stroke (); IctX.Clip (); Ictx.fillStyle = Green; ICTX; .fillrect (0,0,150,100);

If you still want to operate the external canvas, use the save () function to save before cutting, and use the RESTORE () function to restore the previously saved state after cutting, but the operation in the middle will not disappear.

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.