Developing HTML code is a simple task, a text editor, and a browser that supports HTML5 (my browser isFirefox8.0.1 ). Friends who know HTML should know that canvas is the most exciting API in html5. it provides HTML5 developers with the ability to graffiti freely. Let's take a look at canvas.
The <canvas> canvas label is added to html5. with this label, you can use JavaScript to draw images on a webpage. <Canvas> A label is a blank area of a rectangle in the webpage. You can adjust the width and height of a label by using the width and height attributes. To create a canvas, follow these steps:
<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:
<canvas id=”canvas” width=”600” height=”400”> <p>Your browserdoes not support the canvas element.</p> </canvas>
We recommend that you test the above Code to understand the unavailable display of canvas.
<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:
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 (the paint brush in the traditional concept) 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.
Basic API:
StringUse 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 ".
Code example:
<!DOCTYPE HTML>Running effect:
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.
Instance code:
<! Doctype HTML> <body> <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); // specify the start point of a line segment context2d. lineto (100,100); // specify the end point context2d of a line segment. moveTo (200,50); context2d. lineto (100,100); context2d. stroke (); // draw the red arc context2d tangent to the two line segments. beginpath (); // clear the previous path and remind con Text begins to draw a new path. Otherwise, when the stroke () method is called, all the previous paths context2d will be drawn. strokestyle = "# ff0000"; context2d. moveTo (50, 50); context2d. arcto (100,100,200, 50,100); // obviously, it is difficult to set the parameters here ...... Context2d. stroke (); // draw a Blue Circle context2d. beginpath (); context2d. strokestyle = "# ff0000"; context2d. arc( 300,250,100, 0, math. pI * 2, false); // note that the parameter here is in radians rather than context2d. stroke (); // fill the circle above with a gray context2d. fillstyle = "# a3a3a3"; context2d. fill (); // clip a circular Square area context2d in the circle above. beginpath (); context2d. rect (250,200,100,100); context2d. clip (); // This method is indeed very earthy. You need to use the default rectangle or the formulated rectangle, you cannot customize a rectangle. // you can enter a rectangle context2d greater than the size of the area in the editing area. fillstyle = "yellow"; context2d. fillrect (400,400,) ;}</SCRIPT> </body>The effect is as follows:
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:
<!DOCTYPE HTML>The effect is as follows:
If you are interested, you can change the above Code to the following:
<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>Then summarize the differences between the two methods.
For more information, see.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
