HTML5 Canvas Core technology-graphics, animation and game development. Pdf3

Paths and sub-paths

At some point, there can only be one path in the canvas, and the canvas specification is called the current path, which can contain many sub-paths (subpath), and the subpath is made up of two or more points.

Context.beginpath ();

Context.rect (10,10,100,100);

Context.stroke ();

Context.beginpath (); Clears the path created by the last call to the Rect () method

Context.rect (50,50,100,100);

Context.stroke ();

If a second context.beginpath () is removed, it redraws the first rectangle

The "non-0 wrapping rule" used when populating the path

If the current path is circular or contains multiple intersecting sub-paths, use a "non-0 wrapping rule" to determine

Segment

MoveTo () and LineTo ()

Segment and pixel boundaries

If you draw a 1-pixel-wide segment at the boundary of a 2 pixel, the segment actually occupies 2 pixels, and if the segment is exactly between two pixels, the normal

Drawing of segment endpoints and connection points

Line caps are also referred to as "cap" lines

Segment connection point (line join)

If you are using the Miter property, you can also specify a miterlimit

Drawing of arcs and circles

Arc (x,y,radius,startangle,endangle,counterclockwise): circular xy coordinate, radius, start point of Arc, end point, direction of drawing (default false refers to clockwise, true is counterclockwise)

ArcTo (X1,y1,x2,y2,radius) first sets a current point, with X1y1, X2y2 Point (two points in the same column) to form a triangle

Bezier curve

There are two types: the square Bezier curve (two curves, defined by 3 points, two anchor points and a control point), cubic Bezier curves (three curves, defined by 4 points, two anchor points and two control points)

Quadraticcurveto (X1,y1,x2,y2) The first point is the curve's control line, which determines the shape of the curve; the second point is the anchor point.

Beziercurveto (X1,y1,x2,y2,x3,y3) method