HTML 5 Canvas

Lines:

Context.moveto (40, 40); Move the pen to (Context.lineto) (340, 40); Use stroke line to (340, max) Context.stroke (); Let's paint the lines.

Path: The line can also be ticked out, in addition to drawing a line. What is the path? A coil tool similar to Photoshop. In the canvas, you can use the Beginpath and Closepath two methods to build a path,

1. Draw three lines

Context.moveto (40, 40); Move the pen to (Context.lineto) (340, 40); Use stroke line to (340, Context.lineto) (340, 100); Use stroke line to (340, Context.lineto) (40, 100); Use stroke line to (+) Context.stroke (); Let the lines show up

2. Mark the end of the path before drawing the line. The path will be closed:

Context.beginpath (); Start path Context.moveto (340, 40); Use stroke line to (340, Context.lineto) (340, 100); Use stroke line to (340, Context.lineto) (40, 100); Use stroke line to (+) Context.closepath (); End Path Context.stroke (); Let the lines show up

3. Fill the path to delimit the area.

Context.beginpath (); Start path Context.moveto (340, 40); Use stroke line to (340, Context.lineto) (340, 100); Use stroke line to (340, Context.lineto) (40, 100); Use stroke line to (+) Context.closepath (); End Path Context.fill (); Let the lines show up

Rectangular

The painting rectangle has two methods for sketching rectangles and filling rectangles.

Context.strokerect (x, y, width, height); Just outline the bounding rectangle of the frame context.fillrect (x, y, width, height); Draw a rectangle and fill the rectangular area with color

Circular

The circle is different from the rectangle, and there is no method for sketching and filling. A circular path can be drawn through the arc circle, which is then sketched and filled by the stroke and fill methods mentioned earlier.

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

Circular

The circle is different from the rectangle, and there is no method for sketching and filling. A circular path can be drawn through the arc circle, which is then sketched and filled by the stroke and fill methods mentioned earlier.

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

There are a total of 6 parameters. X is the center of the horizontal axis, Y is the center of the ordinate, radius radius, startangle is the angle of the beginning of the circle, Endangle is the angle of the end of the circle, Anticlockwise is the direction of the circle.

HTML 5 Canvas