Domineering HTML5--- canvas (1) api + popup instance

Canvas plotting is probably the most attractive new function in html5. After being powerful, it can basically Replace the effect of flash on the webpage. The following describes the usage of canvas:

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.

Example of ball play: Draw a ball on the canvas. The ball keeps moving up and down from the canvas, and the point stops.

 
 
 
  
Your browser version does not support this function
 <Script type = "text/javascript">/* function mousexy (n) {x = n. clientX; y = n. clientY; document. getElementById ("show "). innerHTML = "coordinate: x axis" + x + "y axis" + y;} */var canvas = document. getElementById ('canvas '); var cxt = canvas. getContext ("2d"); var dir = 50; var exp = 1; // turn function start () {cxt. clearRect (0, 0, 500,500); cxt. beginPath (); cxt. fillStyle = "skyblue" cxt. arc (200, dir, 50, 0, 360, false) cxt. closePath (); cxt. fill (); dir = dir + exp; if (dir = 0 | dir = 500) {exp = exp *-1 ;}} function end () {}</script>StartEnd

Zookeeper