Based on HTML5 Canvas: Detailed explanation of strings, paths, backgrounds, and pictures_html5 tutorial skills

tag itself does not have the ability to draw pictures. It only provides an area for JavaScript to draw images, so the drawing work needs to be completed in JavaScript. The following is the preparation work required before drawing:

The obtained Context object is a built-in object of HTML5, which contains many graphics drawing and adjustment methods. By operating it in JavaScript, you can draw the required graphics in the Canvas canvas.

String

Use the fillText() method of the Context object to draw a string in the canvas. The prototype of fillText() method is as follows:

void fillText(text, left,top, [maxWidth]);

The meaning of its four parameters is: the string to be drawn, the abscissa and ordinate of the upper left corner in the canvas when drawn into the canvas, and the maximum length of the drawn string. The maximum length maxWidth is an optional parameter.

In addition, you can adjust the font and size of the string by changing the font attribute of the Context object. The default is "10px sans-serif".

The following example displays the string "Hello Canvas!" in the canvas (the upper left corner of the string is in the center of the canvas)

Path

The basic graphics of HTML5 Canvas are based on paths. Usually the moveTo(), lineTo(), rect(), arc() and other methods of the Context object are used to first trace the path points of the graphic on the canvas, and then the fill() or stroke() method is used to fill the graphic or draw according to the path points. line.

Usually, you need to call the beginPath() method of the Context object before starting to draw a path. Its function is to clear the previous path and remind the Context to start drawing a new path. Otherwise, when the stroke() method is called, all the previous paths will be drawn. The path affects the drawing effect, and also affects the performance of the web page due to repeated operations. In addition, calling the closePath() method of the Context object can explicitly close the current path, but the path will not be cleared.

Here are prototypes for some methods of drawing paths:

void moveTo(x, y);

is used to explicitly specify the starting point of the path. By default, the starting point of the first path is the (0, 0) point of the canvas, and the subsequent starting points are the end points of the previous path. The two parameters are divided into x and y coordinate values ​​representing the starting point.

void lineTo(x, y);

is used to draw a straight path from the starting point to the specified position. After the drawing is completed, the drawn starting point will move to the specified position. The parameters represent the x and y coordinate values ​​of the specified location.

void rect(left, top,width, height);

is used to draw a rectangle with a known upper left vertex position, width and height. After the drawing is completed, the drawing starting point of the Context will move to the upper left vertex of the rectangle. The parameters represent the x and y coordinates of the upper left corner of the rectangle and the width and height of the rectangle.

void arcTo(x1, y1, x2, y2,radius);

is used to draw an arc that is tangent to two line segments. The two line segments take the current Context drawing starting point and the (x2, y2) point as the starting point, and both end at the (x1, y1) point. The arc's The radius is radius. After the drawing is completed, the drawing starting point will move to the tangent point between the line segment and the arc starting from (x2, y2).

void arc(x, y, radius,startAngle, endAngle, anticlockwise);

is used to draw an arc with the (x, y) point as the center, radius as the radius, startAngle as the starting radian, and endAngle as the ending radian. anticlockwise is a Boolean parameter, true means counterclockwise, false means clockwise. The two radians in the parameters are represented by 0°, and the position is at 3 o'clock; the Math.PI value represents 180°, and the position is at 9 o'clock.

void quadraticCurveTo(cpx,cpy, x, y);

is used to draw a quadratic spline path with the current Context drawing starting point as the starting point, (cpx, cpy) point as the control point, and (x, y) point as the end point.

void bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y);

is used to draw a Bezier curve path with the current Context drawing starting point as the starting point, (cpx1, cpy1) point and (cpx2, cpy2) point as the two control points, and (x, y) point as the end point.

After the path drawing is completed, you need to call the fill() and stroke() methods of the Context object to fill the path and draw path lines, or call the clip() method to clip the Canvas area. The prototypes of the above three methods are as follows:

void stroke();

Used to draw lines according to existing paths.

void fill();

Used to fill the area of ​​the path using the current fill style.

void clip();

Used to set the clipping area in the canvas according to the existing route. After calling the clip() method, the graphics drawing code is only effective in the clipping area and no longer affects the canvas outside the area. If the path is not drawn before the call (that is, in the default state), the resulting clipping area is the entire Canvas area.

In addition, the Context object also provides corresponding properties to adjust the line and fill styles, as shown below:

strokeStyle

The color of the line, the default is "#000000", its value can be set to CSS color value, gradient object or pattern object.

fillStyle

The fill color defaults to "#000000". Like strokeStyle, the value can also be set to a CSS color value, gradient object or pattern object.

lineWidth

The width of the line, the unit is pixels (px), the default is 1.0.

lineCap

The endpoint style of the line, there are three types to choose from: butt (none), round (round head), and square (square head). The default is butt.

lineJoin

There are three styles of turning points of lines: round (rounded corners), bevel (flat corners), and miter (sharp corners); the type is available for selection, and the default is miter.

miterLimit

A sharp program for folding sharp corners of lines, the default is 10.

The following example calls some of the above methods and properties to draw graphics:

Canvas background

In the above example, the fillRect() method is called. In fact, the Context object has 3 methods that can draw graphics directly on the canvas without a path. It can be considered as drawing directly on the canvas background. The prototypes of these three methods are as follows:

void fillRect(left, top,width, height);

Used to fill a rectangle with the upper left corner vertex at (left, top) point, width as width and height as height using the current fillStyle (default is "#000000", black) style.

void strokeRect(left, top,width, height);

is used to draw a rectangular border with the upper left corner vertex at (left, top) point, width as width and height as height using the current line style.

void clearRect(left, top,width, height);

Used to clear all content within the rectangular area with the upper left vertex at (left, top) point, width as width and height as height.

Pictures

Context object has drawImage() method to draw external images into Canvas. The three prototypes of the drawImage() method are as follows:

drawImage(image, dx, dy);

drawImage(image, dx, dy,dw, dh);

drawImage(image, sx, sy,sw, sh, dx, dy, dw, dh);

The following figure shows the meaning of each parameter in the prototype:

Among them, the image parameter can be HTMLImageElement, HTMLCanvasElement or HTMLVideoElement. The sx and sy in the third method prototype are both 0 in the first two, and sw and sh are both the width and height of the image itself; the dw and dh in the second and third prototypes are also both in the first one. are the width and height of the image itself.

The following example draws a remote image into the canvas: