HTML5 Canvas - An example of using paths to draw lines_html5 tutorial skills

Original text:
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 graphics. A path is simply a series of points and the lines connecting these points. Any Canvas context will only have one "current path", and when context.save() is called, the "current path" will not be saved.

The beginning and end of the path

Call beginPath() to start a path, and calling closePath() will end the path. If you connect points in a path, the connection forms a "subpath." We consider a "subpath" to be "closed" if the last point in the "subpath" is connected to its own first point.

Drawing of lines

The most basic path operation consists of repeatedly calling the moveTo() and lineTo() commands. For example, the following example:

Copy the code

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 properties. The following is a list of some commonly used attributes:

lineCap
lineCap defines the style of both ends of the line segment in Canvas, and can be set to one of the following three values:

butt. Default; adds straight edges at both ends of the line segment.
round. Add a semicircular wire cap at each end of the wire segment. The diameter of the wire cap is equal to the width of the wire segment.
square. Add square wire caps to both ends of the wire segment. The side length of the wire cap is equal to the width of the line segment.
lineJoin
lineJoin defines the corner style at the intersection of two line segments. The following are three optional values:

miter. Default; creates a sharp corner. You can limit the length of the cusp by setting the miterLimit attribute - miterLimit is the maximum value of the ratio of the cusp length to the line width, and the default is 10.
bevel. Create a bevel.
round. Create a rounded corner.
lineWidth
lineWidth defines the thickness of the line, the default is 1.0.

strokeStyle
strokeStyle defines the color and other styles used to render lines.

Translation Note: When lineJoin is set to miter, but the length of the sharp corner exceeds the limit of miterLimit, Canvas will display the "bevel" corner effect.