Html5 canvas common api Summary (2) -- drawing API, html5canvas

Html5 canvas common api Summary (2) -- drawing API, html5canvas

Canvas can draw a lot of wonderful styles and beautiful effects. With a few simple APIs, you can present ever-changing effects on the canvas, as well as make web games, next, we will summarize the graph-related APIs.

Canvas is equivalent to canvas while context is equivalent to paint.

1. draw lines

MoveTo (x0, y0): Move the current paint brush (ictx) to the position (x0, y0.

LineTo (x1, y1): draws a straight line from the current position (x0, y0) to (x1, y1.

BeginPath (): Enable a path or reset the current path.

ClosePath (): return to the path starting point from the current point, that is, the position of the previous beginPath, avoidance and path.

Stroke (): Draw. You must add this function to draw a picture, so this must be placed at 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:

Note that if closepath is placed behind the stroke function, it will not be drawn into a closed line, because it has been drawn before the closure, so the line on the left will not be drawn.

2. Line Style

LineCap: Line endpoint style, butt, round, square.

LineJoin: The inflection point style when two lines intersect. When set to miter, you can also set the maximum length of the inflection point through miterLimet.

MiterLimet: If the diagonal length exceeds the value of miterLimit, the corner is displayed in the "bevel" type of lineJoin.

LineWidth: line width

StrokeStyle: Line color, gradient (defined gradient object), mode. 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 (); // beginPath is required here. Otherwise, the first base Session will be used. In the final stroke, a black slash will be drawn again, with three lines in total. Ictx. strokeStyle = "#000000"; ictx. lineCap = "butt"; ictx. lineWidth = 10; ictx. moveTo (80, 10); ictx. lineTo (10, 80); ictx. stroke ();

BeginPath and closePath can appear in pairs, and there is almost no relationship between them. closePath is used to close the end point and start point and draw a closed path.

3. Draw a curve

Arc (x, y, radius, startAngle, endAngle, anticlockwise): draws a curve. radius indicates the curve radius, startAngle, endAngle, and end angle. It uses a radian (Math. PI/180) * angle value, anticlockwise draw direction;

ArcTo (x1, y1, x2, y2, radius): Draw the curve before the two tangent.

Ictx. beginPath (); ictx. moveTo (20, 20); // create the start point ictx. lineTo (); // create a horizontal line ictx. arcTo (, 20, 50); // create an arc ictx. lineTo (150,120); // create a vertical line ictx. stroke ();

The start point and the end point of the curve are tangent to the line of the first point set. The end point of the curve is tangent to the line of the first set point and the second set point.

QuadraticCurveTo (x1, y1, x2, y2): quadratic besell curve. Coordinates of (x1, y1) control points and (x2, y2) end points

BezierCurveTo (x1, y1, x2, y2, x, y): Cubic besell curve. (X1, y1) coordinates of Control Point 1, (x2, y2) coordinates of control point 2 (x, y) coordinates of the end point.

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

4. Draw rectangle and fill

Rect (): Creates a rectangle;

FillRect (x, y, width, height): draws the filled rectangle (x, y) starting point, width, height, width, and height.

StrokeRect (): Draw a Rectangular Box

ClearRect (): Clear the rectangle.

Ictx. fillStyle = "# 0000ff"; // sets the fill color ictx. fillRect (150,100, 100,100); ictx. strokeRect );

5. Paint attributes

FillStyle: Specifies the fill color, gradient, or pattern );

StrokeStyle: Specifies the color, gradient, or mode of the paint brush.

6. Draw shadows

ShadowColor: Shadow yanse

ShadowBlur: Fuzzy Level

ShadowOffsetX: Shadow horizontal distance

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. Draw gradient

CreateLinearGradient (x1, y1, x2, y2): draws a linear gradient. (x1, y1) is the starting point of the gradient and (x2, y2) is the end point of the gradient, vertical or horizontal gradient can be made based on different positions.

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 point of the gradient, r2 is the end point radius;

Use both gradient

AddColorStop (stop, color) to set the gradient process. stop is the 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 to fillstyle. fillRect (20, 20, 150,100); var grd = ictx. createRadialGradient (300,225, 15,250,225,100); grd. addColorStop (0, "#345"); grd. addColorStop (1, "# fff"); ictx. fillStyle = grd; ictx. fillRect (0, 200,150,150,100 );

8. Fill in the background

CreatePattern (image, "repeat | repeat-x | repeat-y | no-repeat"): image is an image object. The following parameters are used to set the image repetition mode.

9. Other related APIs

Fill (): fill in the current path.

IsPointInPath (): ictx. isPointInPath (x, y); determines whether the vertex is in the current path

How to clear the canvas: Obtain the width and height of the canvas, icanvas. height, icanvas. width, and then use clearRect ();

Modify the width and height of the canvas: icanvas. width = '000000'; icanvas. width = '000000.

GlobalAlpha: sets the transparency, which can only be 0 ~ 1. If the transparency is different, you can reset it before the second picture.

ToDataURL: icanvas. toDataURL (type, encoderOptions). This function returns the base64 URI of an image. The parameters are optional. You can set the image type, such as image/jpeg, image/webp, the default value is image/png; encoderOptions is a 0 ~ The value 1 is used to set the image quality of image/jpeg, image/webp, and the parameter set for type in other formats is invalid.

10. Cropping

Clip (): Crop a canvas of any shape and size from the canvas, and all subsequent drawings will be restricted within the cropped area. This method is usually used together with the drawing of rectangular, circular, and other paths. After these methods, cut the image and then draw the image on the cut 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 want to operate on the external canvas, save it by using the save () function before cutting, and restore it to the previously saved state by using the restore () function after cutting, however, the intermediate operations will not disappear.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.