Based on HTML5 Canvas: Detailed description of strings, paths, backgrounds, and images

Comments: Added in HTML5 Canvas label, through which you can use JavaScript to draw images on a webpage. The label is a blank area of the rectangle in the webpage. The width and height attributes can be used to adjust the width and height.

To create a Canvas, follow these steps:

The Code is as follows:
<Canvas id = "canvas" width = "600" height = "400"> </canvas>

You can add alternative text when the <canvas> tag is unavailable to the tag, as shown below:

The Code is as follows:
<Canvas id = "canvas" width = "600" height = "400">
<P> Your browserdoes not support the canvas element. </p>
</Canvas>

Currently, all types of browsers in the new version have gradually started to support HTML5. Therefore, before getting started, make sure that your browser is a new version of Chrome, Firefox, or IE9 or later.

<Canvas> labels do not have the ability to draw images. They only provide an area for JavaScript to draw images. Therefore, drawing must be completed in JavaScript. Preparations before drawing are as follows:

The Code is as follows:
Var canvas = document. getElementById ("canvas ");
Var context2D = canvas. getContext ("2d ");

First, you need to obtain the canvas object in the webpage, and then use the getContext () method to obtain the two-dimensional drawing object from the canvas. The "2d" parameter of the getContext () method represents two-dimensional (it is said that it will be extended to three-dimensional, and currently the only available parameter is "2d ").

The obtained Context object is a built-in HTML5 object, which contains many methods for drawing and adjusting the image. In JavaScript, you can draw the desired image in the Canvas by operating on it.

String

Use the fillText () method of the Context object to draw strings in the canvas. The following is a prototype of the fillText () method:

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

The meanings of the four parameters are as follows: the string to be drawn, the horizontal and vertical coordinates in the upper left corner of the canvas during painting, and the maximum length of the string to be drawn. 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 value is "10px sans-serif ".

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

The Code is as follows:
<Canvas id = "canvas" width = "600" height = "400">
<P> Your browserdoes not support the canvas element! </P>
</Canvas>

<Script type = "text/javascript">
Window. onload = function (){
Var canvas = document. getElementById ("canvas ");
Var context2D = canvas. getContext ("2d ");

Context2D. font = "35px Times New Roman ";
Context2D. fillText ("HelloCanvas! ", Canvas. width/2, canvas. height/2 );
}
</Script>

Path

The basic images of HTML5 Canvas are all based on paths. Generally, use the moveTo (), lineTo (), rect (), and arc () Methods of the Context object to first draw the path of the image in the canvas, and then use fill () or use the stroke () method to fill the graph or draw a line according to the path point.

Generally, you need to call the beginPath () method of the Context object before describing the path. The function is to clear the previous path and remind the Context to start creating a new path. Otherwise, when stroke () is called () when the method is used, all previous paths are drawn, which affects the rendering effect and the web page performance is also affected by repeated operations. In addition, you can call the closePath () method of the Context object to explicitly close the current path, but the path is not cleared.

The following is a prototype of some methods to depict paths:

Void moveTo (x, y );

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

Void lineTo (x, y );

It is used to depict a straight line path from the specified position from the starting point. After the painting is completed, the starting point will be moved to the specified position. The x and y coordinate values at the specified position.

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

It is used to depict the vertex position in the upper left corner and the width and height of a rectangle. After the painting is completed, the starting point of the Context is moved to the top left vertex of the rectangle. The x and y coordinates of the vertex in the upper left corner of the rectangle, and the width and height of the rectangle.

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

It is used to depict an arc tangent to two line segments. The two line segments start from the point (x1, y1) of the current Context and start from the point (x2, y2, the radius of the arc is radius. After the painting is completed, the start point will be moved to the cut point of the Line Segment and the arc starting from (x2, y2.

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

It is used to depict an arc with (x, y) points as the center, radius as the radius, startAngle as the starting radian, and endAngle as the ending radian. Anticlockwise is a Boolean parameter. true indicates that the parameter is counter-clockwise, and false indicates that the parameter is clockwise. The two radians In the parameter are 0 indicating 0 °, and the position is at three o'clock. The Math. PI value indicates 180 °, and the position is at nine o'clock.

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

This interface is used to describe the quadratic spline curve path starting from the current Context, where (cpx, cpy) points are the control points and (x, y) points are the endpoints.

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

This interface is used to describe the start point of the current Context. (cpx1, cpy1) and (cpx2, cpy2) points are two control points, and (x, y) points are the end points of the besell curve path.

After path profiling, you need to call the fill () and stroke () Methods of the Context object to fill the path and draw the path line, or call the clip () method to edit the Canvas area. The prototype of the above three methods is as follows:

Void stroke ();

Used to draw lines based on existing paths.

Void fill ();

Fill the area of the path with the current fill style.

Void clip ();

Used to set the editing area in the canvas according to the existing routes. After the clip () method is called, the graphic rendering code is only valid for the editing area and does not affect the canvas outside the area. If no path is depicted before the call (in the default state), the video clip area is the entire Canvas area.

In addition, the Context object provides corresponding attributes to adjust the line and fill style, as shown below:

StrokeStyle

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

FillStyle

Fill color. The default value is "#000000". Like strokeStyle, the value can also be set to CSS color value, gradient object, or mode object.

LineWidth

The line width, in pixels (px). The default value is 1.0.

LineCap

The endpoint style of the line. Three types are available: butt (none), round (circle header), and square (square header). The default value is butt.

LineJoin

The round (rounded corner), bevel (horizontal corner), And miter (sharp corner) of a line. The default value is miter.

MiterLimit

Sharp program with sharp lines and corners. The default value is 10.

The following example calls some of the above methods and attributes to draw the image:

The Code is as follows:
<Canvas id = "canvas" width = "600" height = "400">
<P> Your browserdoes not support the canvas element! </P>
</Canvas>

<Script type = "text/javascript">
Window. onload = function (){
Var canvas = document. getElementById ("canvas ");
Var context2D = canvas. getContext ("2d ");

// Draw the Intersection Line
Context2D. beginPath ();
Context2D. moveTo (50, 50 );
Context2D. lineTo (100,100 );
Context2D. moveTo (200,50 );
Context2D. lineTo (100,100 );
Context2D. stroke ();
// Draw the red arc tangent to the two line segments
Context2D. beginPath ();
Context2D. strokeStyle = "# ff0000 ";
Context2D. moveTo (50, 50 );
Context2D. arcTo (100,100,200, 50,100 );
Context2D. stroke ();
// Draw a Blue Circle
Context2D. beginPath ();
Context2D. strokeStyle = "# 0000ff ";
Context2D. arc (300,250,100, 0, Math. PI * 2, false );
Context2D. stroke ();
// Fill the circle above in gray
Context2D. fillStyle = "# a3a3a3 ";
Context2D. fill ();
// Edit a circular Square area in the circle above
Context2D. beginPath ();
Context2D. rect (250,200,100,100 );
Context2D. clip ();
// Fill the editing area with a rectangle larger than the size of the area
Context2D. fillStyle = "yellow ";
Context2D. fillRect (400,400 );
}
</Script>

Canvas background

In the preceding example, the fillRect () method is called. In fact, the Context object has three methods to draw a graph directly on the canvas without a path. It can be viewed as being drawn directly in the canvas background. The prototype of the three methods is as follows:

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

Use the current fillStyle (#000000 by default, black) style to fill a rectangle with the top left vertex at (left, top), width, and height.

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

Use the current line style to draw a rectangular border with the top left vertex at (left, top), width, and height.

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

It is used to clear all content of the top-left vertex in the (left, top) vertex, width, and height in the rectangle area.

Image

In the Context object, the drawImage () method can be used to draw external images to the 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 );

Demonstrate the meanings of parameters in the prototype:

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

The following example draws a remote image to the canvas:

The Code is as follows:
<Canvas id = "canvas" width = "600" height = "400">
<P> Your browserdoes not support the canvas element! </P>
</Canvas>

<Script type = "text/javascript">
Window. onload = function (){
Var canvas = document. getElementById ("canvas ");
Var context2D = canvas. getContext ("2d ");

Var pic = new Image ();
Pic. src = "http://imgsrc.baidu.com/forum/pic/item/e6b14bc2a4561b1fe4dd3b24.jpg ";
Context2D. drawImage (pic, 0, 0 );
}
</Script>

The above code has been tested by Google Chrome 14.0 and Mozilla Firefox 7.0 browsers.