HTML5 Canvas -- Introduction to using a path to draw a line

Comments: We can use "path" to draw any image. In short, it is a series of points and the line connecting these points. Only one "current path" is available in any Canvas context. When context. save () is called, the "current path" is not saved.Original article:
Http://www.lifelaf.com/blog? P = 371
This article is translated from Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "Using Paths to Create Lines"

For HTML5 Canvas, we can use "path" to draw any image. In short, it is a series of points and the line connecting these points. Only one "current path" is available in any Canvas context. When context. save () is called, the "current path" is not saved.

Path start and end

You can call beginPath () to start a path, while calling closePath () will end the path. If the point in the connection path, the connection constitutes a "sub-path ". If the last vertex in a sub-path is connected to its first vertex, the sub-path is considered closed.

Line profiling

The most basic path operation consists of the repeated call of the moveTo () and lineTo () commands. For example:

The Code is as follows:
Function drawScreen (){
Context. strokeStyle = "black ";
Context. lineWidth = 10;
Context. lineCap = 'square ';
Context. beginPath ();
Context. moveTo (20, 0 );
Context. lineTo (100, 0 );
Context. stroke ();
Context. closePath ();
}

In the above example, we draw a horizontal line segment with a width of 10 pixels. At the same time, we also set the lineCap and strokeStyle attributes. The following lists some common attributes:

LineCap
LineCap defines the style of two line segments in the Canvas. It can be set to one of the following three values:

Butt. Default Value. straight edges are added at both ends of the online segment.
Round. Add a semi-circular linear cap to each end of the online segment. The diameter of the line cap is equal to the width of the line segment.
Square. Add a Square Line cap to both ends of the online segment. The side length of the Line cap is equal to the width of the line segment.
LineJoin
LineJoin defines the bending style at the intersection of two line segments. The following are three optional values:

Miter. Default Value; create a tip. You can set the miterLimit attribute to limit the length of the tip-miterLimit is the maximum value of the ratio of the tip length to the line width. The default value is 10.
Bevel. Create an angle.
Round. Create a rounded corner.
LineWidth
LineWidth defines the line width. The default value is 1.0.

StrokeStyle
StrokeStyle defines the colors and other styles used to render the line.

:When lineJoin is set to miter, but the tip length exceeds the limit of miterLimit, Canvas will display the "bevel" Corner Effect.