Canvas path

The path can be understood through three related methods provided by Canvas

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:

1. If the beginPath() method is used to start a new path, different values are used for different paths
2. 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

Tags:

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:

1. 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().
2. 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()).
3. 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.