24 canvas basics _ html5 tutorial skills-

This article mainly introduces 24 basic canvas knowledge summaries, which are very comprehensive and detailed and recommended to you. The knowledge points of canvas are summarized as follows for reference at any time.

1. Fill the rectangleFillRect (x, y, width, height );

2. Draw a rectangular borderStrokeRect (x, y, width, height );

3. Erase the rectangleClearRect (x, y, width, height );

4. Fill StyleFillStyle = "red"; style can be color, gradient, and image.

5. Stroke StyleStrokeStyle = "red ";

6. Stroke line widthLineWidth = 4;

7. Line End ShapeLineCap = "butt"; butt (docking)/round (circle)/square (square), butt by default;

8. line intersection StyleLineJoin = "miter"; miter (TIP)/round (rounded corner)/bevel (diagonal corner), default tip;

9. Start to draw the pathBeginPath ();

10. end pathClosePath (); after creating a path, you can call closePath () to draw a line that is connected to the starting point of the path ();

11. Draw an arcArc (x, y, radius, startAngle, endAngle, true/false );

12. Draw an arcArcTo (x1, y1, x2, y2, radius) draws an arc of one day from the previous point to x2, y2, and passes through x1, y1 with the given radius;

13. moveTO (x, y );Move the drawing cursor to (x, y) without drawing a line

14. lineTo (x, y );Draw a straight line from above

15. Secondary besell curve:QuadraticCurveTo (cx, cy, x, y); draw a quadratic curve from the previous point to x, y, cx, cy as the control point.

16. Cubic besell Curve: BezierCurveTo (cx1, cy1, cx2, cy2, x, y); draw a quadratic curve from the previous point to x, y, cx1, cy1, cx2, cy2 as the control point.

17. rect (x, y, width, height );Draw a rectangle from x and y. The width and height are specified by width and height. This method draws a rectangular path instead of an independent shape.

18. Draw text:

(1) Fill text: fillText ("hello", x, y, width); width is the optional maximum pixel width. If the text is greater than the maximum width, this document will contract to adapt to the maximum width.
(2) text stroke: strokeText ("hello", x, y, width); width is the optional maximum pixel width.
(3) text style: font = "bold 14px Arial ";
(4) horizontal text alignment: textAlign = 'start'; // start, end, left, right, and center. Default Value: start. Align the vertical axis based on the starting point (x, y) of the text.
(5) Vertical text alignment: textBaseline = 'alphabetic '; // top, hanging, middle, alphabetic, ideographic, and bottom. Default Value: alphabetic. Align the x axis based on the starting point (x, y) of the text.
(6) text width: var text = "hello"; var length = context. measureText (text); parameter text is the text to be drawn

19. Transformation

(1) rotate (angle): rotate the angle radian of the image around the origin.
You can also use transform (Math. cos (angle * Math. PI/180), Math. sin (angle * Math. PI/180),-Math. sin (angle * Math. PI/180), Math. cos (angle * Math. PI/180 );
(2) scale (x, y): scale the image. You can also use transform (x, 0, 0, y, 0, 0 );
(3) translate (x, y): Move the coordinate origin to x and y. After this transformation, the coordinate 0 and 0 are changed to the point previously represented by x and y. You can also use transform (, x, y );
(4) transform ( , , , , X, y );
(5) setTransform ( , , , , X, y); reset the transformation matrix to the default state, and then call transform ();

20. graphic combination

The Code is as follows:

Context. fillStyle = "blue ";
Context. fillRect (10, 10, 100,100 );
Context. globalCompositeOperation = 'lighter'; optional values include.
Context. fillStyle = "red ";
Context. arc (110,60, 50,0, Math. PI * 2, false );
Context. fill ();
/*
Source-over (default ):
Destination-over: draw a new image under the original image
Source-in: The in operation is performed on the new image and the original image. Only the overlapping parts of the new image and the original image are displayed.
Destination-in: the original and new images are used for in Operations. Only the overlapping parts of the new and original images are displayed.
Source-out: the new image and the original image are used for out operations. Only the new image and the original image do not overlap.
Destination-out: the new image and the original image are used for out operations. Only the out operations that do not overlap with the original image are displayed.
Source-atop: only original and non-overlapping parts of the new and original images are drawn.
Destination-atop: draws only the overlapping parts of the original image and other parts of the new image.
Lighter: the original and new images are drawn, and the overlapping parts are colored.
Xor: only the new and original images do not overlap, and the overlapping parts become transparent.
Copy: only draw new images
*/

21. Draw a graphic shadow

The Code is as follows:

Context. shadowOffsetX = 10; // The horizontal displacement of the shadow.
Context. shadowOffsetY = 10; // The longitudinal displacement of the shadow.
Context. shadowColor = 'rgba (100,100,100, 0.5) '; // shadow color
Context. shadowBlur = 7; // blur the shadow range.

22. Image Rendering, tiled, and cropping

The Code is as follows:

Context. drawImage (image, x, y );
Context. drawImage (image, x, y, w, h );
Context. drawImage (image, sx, sy, sw, sh, dx, dy, dw, dh); sx, sy, sw, sh are the starting coordinates and height of the source image's replicated areas, dx, dy, dw, and dh are the target coordinates and heights of the copied region.
Context. createPattern (image, type); tile the image. The parameters can be: no-repeat, repeat-x, repeat-y, repeat;
Context. clip (); // Cropping

Example:

The Code is as follows:

Image = new Image (); // create an Image object
Image. src = "../images/wukong.gif ";
Var test = context. createPattern (image, 'Repeat-y'); // createPattern sets the tile effect,
Context. fillStyle = test;
Context. fillRect (0, 0, 400,400 );
Image. onload = function () {// the function of this method is to prevent the image from being seen only after the image is fully loaded if the image is a large network image file, in this way, you can load and draw data.
DrawImg (context, image );
}
Function drawImg (context, image ){
// Draw the original image
Context. drawImage (image, 10, 10, 125,125 );
// Partial Amplification
Context. drawImage (image, 90,100,150, 10,125,125 );
Context. rect (20, 20, 80, 80 );
Context. clip ();
Context. drawImage (image, 200,200 );
}

23. Save and restore

Contex. save (); save the current status to the stack. Note: Only settings and transformations of the drawing are saved, and the contents of the drawing are not saved.
Context. restore (); extract the previously saved graph status from the stack.
Applicable scenarios:
(1) deformation of images or images
(2) image Cropping
(3) fillStyle, font, globalAlpha, globalComposite-Operation, lineCap, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor,
ShadowOffsetX, shadowOffsetY, strokeStyle, textAlign, textBaseline

24. Linear Gradient

The Code is as follows:

Var g = context. createLinearGradient (xStart, yStart, xEnd, yEnd );
Var g1 = context. createRadialGradient (xStart, yStrat, radiusStrat, xEnd, yEnd, radiusEnd );
G. addColorStop (0, 'red ');
G. addColorStop (0, 'green ');
Context. fillStyle = g;
Context. fillRect (0, 0, 200,200 );