Html5--canvas

　　Canvas

Used for drawing images, but instead of showing a drawing API to client-side JavaScript, the script is able to draw everything you want to draw onto a canvas, with the ability to draw paths, rectangles, circles, characters, and images. All labels are just a container of graphics, and you must manipulate the drawing using JavaScript's API.

　　The first is the need to have a canvas in the page of this graphics container

　　　　<canvas  id="canvas" height="600"width="800">

   　　　　  您的浏览器不支持canvas！ 　　　　</canvas> 　 the next step is to use the interface to get and render as a 2d object (only two dimensions are currently supported). 　　　　

var canvas = document.getElementById ("Canvas");

var context = Canvas.getcontext ("2d");

ways to depict paths:

　　　　 beginPath();   : 开始路径绘制。

　　　　MoveTo (x, y): Displays the starting point of the specified path as x, Y, the upper-left corner as the origin, the x-axis horizontally, and the y-axis vertically. The default starting point for canvas is 0, 0.

LineTo (x, y): depicts a line from the starting point to the (x, y) point and sets the starting position to (x, y).

Quadraticcurveto (CPX, cpy, X, y): The current context draws the starting point as the starting point, (cpx,cpy) The point is the control point, (x, y) is the two-time spline path of the end point.

Beziercurveto (cpx1, Cpy1, cpx2, Cpy2, x, y); : The Bezier path with the starting point of the current context drawing starting point, (cpx1,cpy1) point and (Cpx2, cpy2) point as the end of the two control point, (x, y) points.

Stroke (): Draws lines by route.

Fill (): Fills the path area with the currently set style

FillRect (left, top, width, height): Directly fills the rectangle

Clearreck (left, top, width, height): Clears all content within the rectangle.

Closepath (); : Turns off path drawing.

Strokestyle: Line color, default to "#000000", can be set to CSS color value, gradient object, or pattern object. 　　　

FillStyle: The color of the fill.

LineWidth: line width. Unit px.

Translate (x, y): Translation transformation, Origin moved to coordinates (x, y);

Rotate (a): rotation transformation, rotation of a degree angle;

Scale (x, y): telescopic transformation;

Save (), restore (): Provide and a stack, save and restore the drawing state, save to press the current drawing state onto the stack, restore out of the stack, restore the drawing state;

Context.save ();//Save Drawing State

Context.beginpath (); // 开始路径绘制。
Context.moveto (50,50); Move to coordinates context.lineto (150,150); Underline the trajectory to 150context.stroke (); Show Trace Context.closepath () in line;// 关闭路径绘制。

Conttext.restore ();//Restore Drawing State

　　

　　Draw text　　

Filltext (string, x, y, maxWidth) is used to draw text whose four parameters are text content, the x-coordinate of the starting point, the y-coordinate, and the maximum allowable text width, in pixels (optional). Before using, use font to set font, size, style (similar to the Font property of CSS). Similar to this is the Stroketext method, which is used to add hollow words.

　　

Draw circles and slices

The arc () method creates an arc/curve (used to create a circle or a partial circle).

Context.arc (x, y, radius, startangle, Endangle, anticlockwise);

The X and Y of the arc method are the center coordinates, RADIUS is the radius, startangle and Endangle are the starting and ending angles of the sector (in radians), anticlockwise (optional) Indicates whether the diagram should be drawn counterclockwise (true) or clockwise (false)

　　Draw an image, canvas, or video

DrawImage ();

The DrawImage () method can also draw portions of an image and/or increase or decrease the size of an image.

context. DrawImage (img,sx,sy,swidth,sheight,x, y,width,height);

IMG: Specifies the image, canvas, or video to use.

SX: Optional. The x-coordinate position at which to start clipping.

SY: Optional. The y-coordinate position at which to start clipping.

Swidth: Optional. The width of the image being clipped.

Sheight: Optional. The height of the image being clipped.

X: Place the x-coordinate position of the image on the canvas.

Y: Place the y-coordinate position of the image on the canvas.

Width: Optional. The width of the image to use. (stretching or shrinking the image)

Height: Optional. The height of the image to use. (stretching or shrinking the image)

Html5--canvas