How to use paths
Drawing in Canvas is actually to define some coordinate points in a certain order, and then connect these coordinate points with a brush in a specified way to form the graphics we need.
All basic graphics in Canvas, including line segments, rectangles, arcs, Bezier curves, etc., are drawn based on paths.
In Canvas, the points that pass from the starting point of drawing to the end point of drawing are called paths. A path can contain multiple sub-paths, and sub-paths are composed of two or more points. At a certain time, only one path can exist in the canvas, and the canvas specification refers to it as the "current path". When using paths, the general steps for drawing graphics are:
- Call the beginPath() method to start a new path.
- Call the moveTo(x, y) method to start a new subpath with (x, y) as the starting point and move the brush to that starting point.
- Defines the content of the subpath. For example, the rect() method defines a rectangular path, the arc() method defines an arc path, and so on.
- Call the closePath() method to close the path, making the path closed.
- Each time the beginPath() method is called, a new path will be defined, and this method will clear all sub-paths in the current path; each time the moveTo (x, y) method is called, a new sub-path will be defined.
illustrate:
Defining sub-paths in Canvas generally does not need to specify a starting point. The default starting point of the first sub-path is the origin of the canvas, and the starting point of the other sub-paths is the end point of the last defined path. Therefore, call the moveTo() method only when you need to redefine the starting point.
To close a path is to automatically take the start point of the path as the end point, and connect the start point and the end point with a straight line to form a closed area. If you don't need to draw a closed figure, you don't have to call the closePath() method.
There are several special methods in canvas, such as the rect() method, which is called the path method, and they automatically call the moveTo() and closePath() methods. Steps 2 and 4 can be omitted when using the path method to draw graphics.
For simplicity, here is an example of using the path method to draw two rectangles, and examples using moveTo() and closePath() will be given later in this chapter.
context.beginPath();
context.rect(50, 20, 120, 100);
context.stroke();
context.beginPath();
context.rect(220, 20, 120, 100);
context.fill();The above code starts a new path by calling beginPath(), then calls the rect() method to add a sub-path containing 4 points to the current path, and finally calls the stroke() method, which strokes the path to make it in the canvas display.
Next, call the beginPath() method again, this method will clear the sub-path created by the last call to the rect() method, and then call the rect() method to add a sub-path containing 4 points to the current path, and finally call The fill() method fills the path so that the second rectangle is also displayed in the canvas. The running effect of this example is shown in Figure 4-3:
Figure 4-3 Stroke and fill effects
What if the beginPath() method is not called when drawing the second rectangle? Let's take a look at the running effect first, as shown in Figure 4-4:
Figure 4-4 The effect of paths on drawing
As you can see from the above image, the first rectangle is also filled rather than stroked. Why is this?
Because the drawing method in canvas is based on all paths after the previous beginPath (), the beginPath () method must be called each time before starting to draw a path to notify canvas that a new graphic is about to be drawn. . Otherwise, all sub-paths added later are added to the existing sub-paths, and the previous sub-paths will be redrawn each time they are drawn. In this way, not only affects the drawing effect, but also seriously affects the performance.