Canvas path
The path can be understood through three related methods provided by Canvas
| methods | instructions |
|---|---|
| beginPath() | Start a new path |
| closePath() | Close the current path |
| isPointPath() | Determines whether a point exists in the current path |
The first two are important to understand
BeginPath () method
The meaning of this method is to open a new path. Canvas draws graphs based on state, and every stroke and fill drawing, canvas will check all states defined by the whole program. When the state value changes, there are two different processing methods according to whether beginPath() is used:
- If the beginPath() method is used to start a new path, different values are used for different paths
- If the beginPath() method is not used, the following values override the preceding ones
The criterion for determining whether a path is the same is whether the beginPath() method is used, not whether the lines are visually connected
In other words, as long as there is no beginPath() method in between, both draws are in the same path
Such as:
<script type="text/javascript"> function $$(id) { return document.getElementById(id); } window.onload = function () { var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.lineWidth = 5; // the first line cxt.moveTo(50, 40); cxt.lineTo(150, 40); cxt.strokeStyle = "red"; cxt.stroke(); // the second line cxt.moveTo(50, 80); cxt.lineTo(150, 80); cxt.strokeStyle = "green"; cxt.stroke(); Cxt. moveTo(50, 120); cxt.lineTo(150, 120); cxt.strokeStyle = "blue"; cxt.stroke(); } </script> <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>Copy the code
Although these three lines look like three separate lines that are not connected, in the code, when the three lines are drawn, there is no beginPath() in the middle to open a new path, so the three lines are actually in the same path, and the best verification is that the colors of the three lines are covered by the blue set last time. When using beginPath() to create a new path, the effect is as follows
<script type="text/javascript"> function $$(id) { return document.getElementById(id); } window.onload = function () { var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.lineWidth = 5; // the first line cxt.beginPath(); cxt.moveTo(50, 40); cxt.lineTo(150, 40); cxt.strokeStyle = "red"; cxt.stroke(); // the second line cxt.beginPath(); cxt.moveTo(50, 80); cxt.lineTo(150, 80); cxt.strokeStyle = "green"; cxt.stroke(); // the third line cxt.beginPath(); cxt.moveTo(50, 120); cxt.lineTo(150, 120); cxt.strokeStyle = "blue"; cxt.stroke(); } </script> <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>Copy the code
When each line is an independent path, the Settings of the independent paths do not affect each other
ClosePath () method
The closePath() method focuses on closing and closing
The closePath() method is used to close the current path so that the graph is in a closed state, rather than an end path, which is beginPath() ‘s task
For example
<script> function $$(id){ return document.getElementById(id) } window.onload = function (){ var cnv = $$('canvas') var CXT = cnv.getcontext ('2d') cxt.beginpath () cxt.moveto (120,70) cxt.arc(70,120,50,0,-90 * math.pi / 180,true) cxt.closePath() cxt.stroke() } </script> <canvas id="canvas" width="200" height="200" style="border: 1px dashed gray;" ></canvas>Copy the code
Without closePath(), the pattern would be a circle from green to red. When closePath() is used, the starting point (blue) of the path connects to the beginning (green) and end (red) of the pattern, making the pattern closed. This is rare. In general, the head of the path and the head of the pattern overlap.
This is just to understand the closure of closePath(). The actual definition of closePath() is to connect the start and end points and close the graph
The Canvas state
The other two important concepts in Canvas besides paths are: state. Canvas draws graphs based on state
Clip () method
In Canvas, we can specify a clipping region with the clip() method and the drawing of the basic graph. This clipping region is drawn by the basic graph. When we specify the clipping region, if the graph drawn after the clipping region exceeds this clipping region, the excess part will not be displayed.
Clip () does not support strokeRect() and fillRect(). Instead, rect() can be used
It can be understood as selecting a region in the Canvas area by using the basic graph box. After selection, it can only be drawn in this region, and beyond this region, it will not be displayed
The clearRect() method does not clear the clipping state of the canvas
The save() method and restore() method
Canvas provides us with two methods for manipulating state: the save() method and the restore() method, which are usually used in pairs.
The save() method: saves the current state
Restore () method: Restores the previously saved state
The saving and restoration of Canvas state is mainly used in the following three occasions:
- Graphic or picture clipping. In the Canvas, we can use the save() method to preserve the current state before the graph or image is clipped, i.e. clip(), and then use the restore() method to restore the saved state after the clip().
- Distortion of a graph or picture. In the Canvas, we can use the save() method to preserve the current state before the shape or image is distorted (i.e. clip()), and then use the restore() method to restore the saved state after the distortion (i.e. clip()).
- State property changes. If the state attributes change, we can use the save() method before those states change, and then we can use the restore() method to restore the state.
Other applications
GlobalAlpha property
Purpose: Defines the transparency of the Canvas environment. The default value 1.0 is completely opaque and 0 is completely transparent
Once defined, this property applies to the entire canvas
GlobalCompositeOperation properties
In Canvas, it is common to see different graphics crossed together. Under normal circumstances, the browser will display each graph in turn according to the drawing order, following the principle of “the last comes first”, and the last drawing will overwrite the previous drawing.
If you want to change the way the cross graphics are displayed, you can use the globalCompositeOperation property
The default source-over attribute is described as follows. Displays the source image on the target image. Source-atop displays the source image at the top of the target image. Parts of the source image that lie outside the target image are not visible. Source-in displays the source image in the destination image. Only part of the source image within the target image is displayed, and the target image is transparent. Source-out displays the source image outside the target image. Only parts of the source image other than the target image are displayed, and the target image is transparent. Destination-over displays the destination image above the source image. Destination-atop displays the target image at the top of the source image. Portions of the target image other than the source image are not displayed. Destination-in Displays the destination image in the source image. Only parts of the target image within the source image are displayed, and the source image is transparent. Destination-out displays the destination image outside the source image. Only parts of the target image outside the source image are displayed, and the source image is transparent. Lighter displays source image + target image. Copy displays the source image. Ignore the target image. Xor combines source and target images using xor operations.
| Attribute values | describe |
|---|---|
| source-over | The default. Displays the source image on the target image. |
| source-atop | Displays the source image at the top of the target image. Parts of the source image that lie outside the target image are not visible. |
| source-in | Displays the source image in the target image. Only part of the source image within the target image is displayed, and the target image is transparent. |
| source-out | Displays the source image outside the target image. Only parts of the source image other than the target image are displayed, and the target image is transparent. |
| destination-over | Displays the target image above the source image. |
| destination-atop | Displays the target image at the top of the source image. Portions of the target image other than the source image are not displayed. |
| destination-in | Displays the target image in the source image. Only parts of the target image within the source image are displayed, and the source image is transparent. |
| destination-out | Displays the target image outside the source image. Only parts of the target image outside the source image are displayed, and the source image is transparent. |
| lighter | Display source image + target image. |
| copy | Displays the source image. Ignore the target image. |
| xor | Combine source and target images using xor operations. |
| darker | Both shapes are shown, and in the overlap, the colors are formed by subtracting the color values of the two shapes |
