CanvasCanvas is actually very simple for HTML, just a tag element, but it does not behave itself, but it presents a drawing API to client-side JavaScript so that the script can 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.Canvas DrawingThe first is the need to have a canvas in the page of this graphics container, in order to facilitate testing in the browser, direct console overlay written to the canvas label page,
Document.open ();d ocument.write (); // document.close ();
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 cantxt = Canvas.getcontext ("2d");
The first is to get to the canvas object and get a two-dimensional object from the canvas object for processing. If you use Object.prototype.toString to detect cantxt, the type is[Object CANVASRENDERINGCONTEXT2D]You can manipulate the canvas by acquiring its 2d object.
The first is the API for some paths:ways to depict paths:
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).
Rect (left, top, width, height): depicts the position of the end of a known upper-right corner, as well as the height and width of the rectangle. After the completion of the painting the starting point is bound to the upper left corner seat.
ArcTo (x1, y1, x2, y2, radius): Used to depict an arc tangent to two segments, with two segments starting at the current context drawing starting point and (x2, y2) points, all with (x1, y1) points as the end point, radius of the arc radius. The drawing start point is moved to the tangent point of the segment with the arc starting at (x2, y2).
Arc (x, y, radius, startangle, Endangle, anticlockwise): Used to depict a point with (x, y) as the center, radius as radius, startangle as the starting Radian, and Endangle as the terminating radian Arc. Anticlockwise is a Boolean parameter, True indicates counterclockwise, and False indicates clockwise. The two radians in the parameter are 0 for 0°, the position is at 3 o'clock, the Math.PI value is 180°, and the position is in 9 o'clock direction.
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.
after you finish drawing the path, you also need to draw the path or fill color using the following methods:
stroke (): Draws lines by route. Fill (): Fills the path area with the currently set style. Clip (): Sets the clipping region in the canvas according to an existing route, and after the call, the graphic editing code is only valid for the editing area and is not valid for the outside world. If not called, the current entire canvas is the editing area.
Cantxt.rect (50,50,40,80); Cantxt.fillstyle= "#0F0"; Cantxt.fill (); cantxt. MoveTo (50,50);//move to coordinatesCantxt.lineto (150,150);//Draw the trajectory to theCantxt.stroke ();//show tracks as Lines//Suddenly, the color is a bit wrong, the black line will affect the green of the rectangle. So you need to use the open path to close the path of the method to partition the link between the paths. Cantxt.beginpath (); Cantxt.rect (50,50,50,100); Cantxt.fillstyle= "#0F0"; Cantxt.fill (); Cantxt.closepath (); Cantxt.beginpath (); cantxt. MoveTo (50,50);//move to coordinatesCantxt.lineto (150,150);//Draw the trajectory to theCantxt.stroke ();//show tracks as LinesCantxt.closepath (); Cantxt.beginpath (); Cantxt.moveto (50,50); Cantxt.arcto (100,100,200,50,50); Cantxt.stroke (); Cantxt.closepath ();
and a few other ways:filltext (text, left, top, [MaxWidth]): string, relative to the origin of the coordinates, the maximum length of the string. The maximum length of maxwidth is an optional parameter.
Cantxt.filltext ("ABCDE", 100,300);
Another way is to fill in the color without using the path:
FillRect (left, top, width, height): fills the rectangle directly. Strokerect (left, top, width, height): outlines a rectangular border. Clearreck (left, top, width, height): Clears all content within the rectangle.
Cantxt.strokerect (50,50,100,100// Discovery will also leave a circle of border Cantxt.clearrect (49,49,102,102);
FillRect doesn't have the above problem. There are also several properties that you can set:
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. LineCap: Line end style, butt none, round round head, Square Square head. lineJoin: Processing of line transitions, round fillet, bevel boxer, miter sharp corner. Miterlimit: Sharpness of sharp angle, default ten.Translate (x, y): Translation transformation, Origin moved to coordinates (x, y), rotate (a): rotation transform, rotation of a degree angle, scale (x, y): Telescopic transform; Save (), restore (): Provides and a stack, saves and restores drawing state, Save the current drawing state into the stack, restore out of the stack, restore the drawing state;
Cantxt.translate (200,200); Cantxt.rotate (1); Cantxt.moveto (0,0); Cantxt.lineto (100,100 ); Cantxt.stroke ();
The context object has the DrawImage () method to draw an external picture into the canvas.
the 3 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);
Where the image parameter can be htmlimageelement, htmlcanvaselement, or htmlvideoelement. In the third method, the SX and Sy in the first two are all 0,SW and sh are the width and height of the image itself. The DW and DH in the second and third prototypes are also the width and height of the image itself.
Introduction to the Canvas API 1
