Domineering side leakage html5----canvas (1) API + Pinball Example

HTML5 perhaps the most attractive new feature is canvas paint. The basic can be powerful enough to replace the effect of the Flash page. Here's how to use the canvas:

The basic graphics for HTML5 canvas are path-based. You typically use the MoveTo (), LineTo (), rect (), Arc () methods of the context object to first plot the path point of the graphic in the canvas, and then use the fill () or stroke () method to fill the graphic or draw the line according to the path point.

Usually. The Beginpath () method of the context object needs to be called before the path is started, to clear the previous path and to remind the context to draw a new path, otherwise when the stroke () method is called, all previous paths are drawn, affecting the drawing effect. At the same time also due to repeated operations to affect the performance of the Web page.

In addition, calling the Closepath () method of the context object can explicitly close the current path, except that the path is not cleared.

Here are some prototypes of methods that depict paths:

void MoveTo (x, y);

Used to explicitly specify a starting point for a path. By default, the starting point of the first path is the (0, 0) point of the canvas. The starting point after is the end of the previous path. Two parameters are divided into X-and y-coordinate values that represent the starting point.

void LineTo (x, y);

Used to depict a straight path from the starting point to a specified position, and the drawn starting point is moved to that specified position. The number of references represents the X-, y-coordinate value of the specified position.

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

Used to depict a rectangle with a known upper-left vertex position and a width and height, and the drawing start point of the context is moved to the upper-left vertex of the rectangle when it is finished. The parameters represent the x, y coordinates of the top-left vertex of the rectangle, and the width and height of the rectangle.

void ArcTo (x1, y1, x2, Y2,radius);

Used to depict an arc tangent to two segments, with two segments starting at the current context drawing start and (x2, y2) points. All take (x1, y1) points as the end point. The radius of the arc is radius.

The drawing start point is moved to the tangent point of the segment with the arc starting at (x2, y2).

void Arc (x, Y, Radius,startangle, Endangle, anticlockwise);

Used to depict a point as a center (x, y). Radius is radius. StartAngle is the starting radian and Endangle is the arc of the terminating arc. The anticlockwise is a Boolean parameter. True indicates counterclockwise. False indicates clockwise. The two radians in the parameter represent 0° at 0. The position is in the 3 o'clock direction. The Math.PI value represents 180° and the position is at 9 o'clock.

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

Used to depict a two-time spline path with the starting point of the current context drawing, the (cpx,cpy) point as the control point, and (x, y) as the end point.

void Beziercurveto (Cpx1,cpy1, CPX2, Cpy2, x, y);

Used to depict the starting point to draw the current context. (CPX1,CPY1) points and (cpx2, cpy2) points are two control points. The Bezier path (x, y) point to the end of the curve.

After the path is painted. You need to call the fill () and stroke () methods of the context object to populate the path and draw the path line, 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 an existing path.

void Fill ();

The area used to populate the path with the current fill style.

void clip ();

Used to set the clipping region in the canvas according to an existing route.

After calling the clip () method, the drawing code only works on the clipping region and no longer affects the canvas outside the area. The path is not depicted before the call (that is, the default state). The resulting clipping region is the entire canvas area.

In addition, the context object provides the corresponding properties to adjust the line and fill style, as seen in the following:

Strokestyle

The color of the line, implicitly feeling "#000000", whose value can be set to a CSS color value, a gradient object, or a modal object.

FillStyle

Fill the color, default feel "#000000". As with Strokestyle, values can also be set to CSS color values, gradient objects, or pattern objects.

LineWidth

The width of the line, in pixels (px), defaults to 1.0.

LineCap

The end style of the line, with Butt (none), round (round head), Square (square) three types to choose from, the default feel butt.

LineJoin

The corner of the line style, there are round (fillet), bevel (boxer), miter (sharp angle) three kinds. Type to choose from, the tacit feel miter.

Miterlimit

Sharp corners of the line, the sharpness of the program, default feel 10.

Pinball Example: Draw a ball on the canvas, point to start the ball in the canvas and keep moving up and down, point end stop movement.

<!--draw back and forth to move the ball--><! DOCTYPE html><meta charset= "UTF-8" ><canvas width= "$" height= "$" style= "Background:yellow" Onmousemove= "mousexy" id= "Canvas" > your browser version number does not support this feature </canvas><div ID = "Show" ></div>< Script type= "Text/javascript" >/*function mousexy (n) {X=n.clientx;y=n.clienty;document.getelementbyid ("show"). innerhtml= "Coordinates: 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 ();d ir = dir+exp;if (dir==0| | DIR==500) {exp = exp*-1;}} Function End () {}</script><button id= "start" onclick= "Tt=setinterval (start,10);" > Start </button><button id= "End" onclick= "Clearinterval (TT);" > End </button>



Copyright notice: This article Bo Master original article. Blog, not reproduced without consent.

Domineering side leakage html5----canvas (1) API + Pinball Example