HTML5 Canvas Common API Summary (ii)--Drawing API

Canvas can draw a lot of amazing styles and beautiful effects, through a few simple APIs can be on the canvas to show a variety of effects, but also to create a web game, next summarizes the drawing-related APIs.

Canvas is the canvas when painting, and context is equivalent to a brush.

1. Draw lines

MoveTo (X0,Y0): Moves the current brush (ICTX) to this position (X0,Y0).

LineTo (x1,y1): Draws a straight line from the current position (X0,Y0) to (x1,y1).

Beginpath (): Opens a path or resets the current path.

Closepath (): Returns to the starting point of the path from the current point, that is, the position, avoidance, and path of the previous beginpath.

Stroke (): Draw. This function must be added in order to draw, so this must be put in the end.

var Icanvas=document.getelementbyid ("Icanvas"), Var ictx=icanvas.getcontext ("2d"); Ictx.beginpath (); Ictx.moveTo ( 0,0); Ictx.lineto (300,150); Ictx.lineto (3,150); Ictx.closepath (); Ictx.stroke ();

Effect:

It is important to note that if Closepath is placed behind the stroke function, it will not be drawn as a closed line because it is drawn before closing, so the line on the left is not drawn.

2. Line Style

LineCap: Line end style, Butt,round,square.

LineJoin: The inflection point style when two lines intersect, where the maximum length of the inflection point junction can also be set by Miterlimet when set to Miter.

　　　　　　　　　　　　

Miterlimet: If the miter length exceeds the value of Miterlimit, the corner is displayed with the "bevel" type of lineJoin.

LineWidth: line width

Strokestyle: Line Color, gradient (well-defined gradient object), pattern. Context.strokestyle= "#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 ();//Must be beginpath here, otherwise it will always be the first base session, at the end of the stroke, will draw a black slash, altogether 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 be paired, there is little relationship between the two, Closepath is used to close the end and the starting point to draw a closed path.

3. Drawing Curves

Arc (x,y,radius,startangle,endangle,anticlockwise): Draw the curve, radius is the curve radius, startangle,endangle start angle and end angle, with radians (math.pi/ 180) * Angle value, anticlockwise drawing direction;

ArcTo (X1,y1,x2,y2,radius): Draws the curve before the two tangents.

Ictx.beginpath (); Ictx.moveto (20,20);           Create start point Ictx.lineto (100,20);          Create horizontal Ictx.arcto (150,20,150,70,50); Create Arc Ictx.lineto (150,120);         Create a vertical line ictx.stroke ();   

The starting and ending points of the drawing curve are tangent to the line of the first point set, and the end of the curve and the first set point are tangent to the line of the second set point.

Quadraticcurveto (x1,y1,x2,y2): two times Bezier curve. (x1,y1) control point coordinates, (x2,y2) the coordinates of the end point

Beziercurveto (x1,y1,x2,y2,x,y): three times Bezier curve. (x1,y1) The coordinates of Control point 1, (X2,y2) control point 2, coordinates (x, y) end points.

Bezier curves are useful for drawing some very smooth curves.

4. Draw rectangles and fills

Rect (): Creates a rectangle;

FillRect (X,y,width,height): Draws the filled rectangle: (x, y) Start point, width,height rectangle width Height

Strokerect (): Draw Rectangle wireframe

Clearrect (): Clears out the rectangle.

Ictx.fillstyle= "#0000ff";//Set Fill Color ictx.fillrect (20,20,150,100); Ictx.strokerect (180,20,100,100);

5. Brush Properties

FillStyle: Sets the fill color, gradient, or pattern (patten);

Strokestyle: Color, gradient, or pattern of a brush

6. Drawing Shadows

Shadowcolor: Shadow Yanse

Shadowblur: Blur Level

SHADOWOFFSETX: Horizontal distance of shadows

Shadowoffsety: The vertical distance of the shadow

Ictx.shadowblur=20;ictx.shadowcolor= "#456"; ictx.shadowoffsetx=-10;ictx.shadowoffsety=30;// First set the shadow and then draw the rectangle ictx.fillstyle= "#108997"; Ictx.fillrect (20,20,100,80); Ictx.stroke ();

7. Drawing gradients

Createlineargradient (X1,y1,x2,y2): Draws a linear gradient, (X1,Y1) is the starting point of the gradient, (x2,y2) is the end of the gradient, the position can be different to create a vertical or horizontal gradient.

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

Both gradients require the use of

Addcolorstop (Stop,color) to set the gradient process, stop is a value from 0.0 to 1.0.

var grd=ictx.createlineargradient (0,0,170,0), grd.addcolorstop (0, "#000"), Grd.addcolorstop (0.5, "#378923"); Grd.addcolorstop (1, "#ddd"); ictx.fillstyle=grd;//here the gradient is an object used to pass the value Ictx.fillrect (20,20,150,100) to FillStyle; var grd= Ictx.createradialgradient (300,225,15,250,225,100); Grd.addcolorstop (0, "#345"); Grd.addcolorstop (1, "#fff"); Ictx.fillstyle=grd;ictx.fillrect (200,150,150,100);

8. Fill the background

Createpattern (Image, "repeat|repeat-x|repeat-y|no-repeat"): Image is a picture object, and the following parameters are used to set the repetition of the image.

9. Other related APIs

Fill (): Fills the current path.

Ispointinpath (): Ictx.ispointinpath (x,y), determines whether the point is in the current path

Clear the Canvas method: Get the canvas's width high, icanvas.height,icanvas.width, and then use Clearrect ();

Modify the width and height of the canvas: icanvas.width= ' n '; icanvas.width= ' 300 ' method.

Globalalpha: Set the transparency, only the number of 0~1, if the transparency is not the same, before drawing the second picture to reset.

ToDataURL:icanvas.toDataURL (type,encoderoptions), this function returns an image of the Base64 URI, the parameters are optional, type can set the picture type such as Image/jpeg, IMAGE/WEBP, the default is Image/png;encoderoptions is a 0~1 number, used to set the image quality of IMAGE/JPEG,IMAGE/WEBP, the other format of the type set this parameter is invalid.

10. Tailoring

Clip (): The canvas in which any shape and size is clipped from the canvas, and all the drawings are then confined to the trimmed area. This method is usually used in conjunction with drawing rectangles, circles, and so on, after which the image is cut, and then the drawing must be on the clipped 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 also want to manipulate the external canvas, save with the Save () function before clipping, and then use the Restore () function to revert to the previously saved state, but the intermediate actions do not disappear.

Well, know the above API has been able to draw some interesting graphics ~ Quick Draw It ~ example: Demo "Draw a Bug"

Original content, reproduced please specify the source:

Jess_ Meow

Source: http://www.cnblogs.com/zhangwenjiajessy/p/6160271.html

HTML5 Canvas Common API Summary (ii)--Drawing API