HTML5 Canvas (2)-Path

Comments: This section describes the basic graphics in the Canvas. The basis of the graph-the path is in the Canvas, and all the basic graphs are based on the path. That is to say, when we call the lineTo and rect methods of 2 dContext, in fact, it is to introduce the basic graphics in the Canvas to the set of context paths.

Graph basics-Path

In the Canvas, all basic images are path-based. That is to say, when we call methods such as lineTo and rect of 2 dContext, in fact, some path points are added to the context path set. When the fill or stroke method is used for painting, the path points are filled or laid.

You should use context every time you start to draw a path. the beginPath () method tells the Context object to start to draw a new path. Otherwise, the path to be drawn will be superimposed with the previously drawn path, and problems will occur when the border is filled or drawn. After creating the path, you can use the context. closePath () method to close the path or manually close the path. In addition, if the path is not closed when it is filled, Context will automatically call the closePath method to disable the path.

Basic Path Method

1. beginPath, closePath

These two methods have been described earlier, which are used to notify Context to start a new path and disable the current path.

When using a path in a Canvas, you should keep a good habit of calling the beginPath method before you start to draw the path. Otherwise, the drawn results will be ugly and seriously affect the performance.

In the following figure, the left graph calls beginPath before each rectangle to clear the previous path and re-draw the new path, the subsequent graph only calls beginPath to clear the path before drawing all the images. Therefore, although the border color is #666, however, the color of the image on the right is a little deeper than that on the left, because each time you use stroke to draw a border, the previous path is drawn again, and the color is darker than the original one.

<canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "#666"; function useBeginPath() { for (var i = 0; i < 5; ++i) { ctx.beginPath(); ctx.rect(10 + i*20, 10 + i*20, 210 - i*40, 210 - i*40); ctx.stroke(); } } function notUseBeginPath() { ctx.beginPath(); for (var i = 0; i < 5; ++i) { ctx.rect(240 + i*20, 10 + i*20, 210 - i*40, 210 - i*40); ctx.stroke(); } } useBeginPath(); notUseBeginPath(); </script>

Tip: you can modify some code before running

In the Context, the number of paths is small. If the display effect is not taken into account, the performance is acceptable. However, if the number of paths in the Context is large, beginPath is not used before creating a new path, because the previous path needs to be re-drawn each time, the performance will decrease exponentially.

Therefore,Unless otherwise required, you must call beginPath to start a new path before creating a path.

2. Moving and straight lines moveTo, lineTo, rect

<canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(110,110); ctx.lineTo(10, 110); ctx.lineTo(10, 10); ctx.stroke(); ctx.beginPath(); ctx.rect(120, 10, 100, 100); ctx.stroke(); </script>

Tip: you can modify some code before running

Void moveTo (in float x, in float y );

You do not need to specify the start point to draw a path in the Canvas. The default start point is the end point of the last draw path. Therefore, if you need to specify the start point, you need to use the moveTo method to specify the location to be moved.

Void lineTo (in float x, in float y );

The lineTo method draws a direct path to the specified position. After the lineTo method is called, The draw start point inside the Context will move to the end point of the straight line.

Void rect (in float x, in float y, in float w, in float h );

The rect method is used to draw a rectangular path. The parameter specifies the position in the upper left corner, the width and height. After calling rect, the start point of Context is moved to the upper left corner of the rectangle drawn by rect.

The rect method is different from the arc method described later. They use parameters to specify the start point, rather than the start point of Context internal maintenance.

3. Curve arcTo, arc, quadraticCurveTo, bezierCurveTo

Void arcTo (in float x1, in float y1, in float x2, in float y2, in float radius );

According to the description in the WHATWG document, this method is to draw an arc tangent to two rays, one of which is the start point for drawing through the Context, and the end point is (x1, y1 ), the other one is to pass through (x2, y2), the end is (x1, y1), and the arc is the smallest arc tangent to the two rays. After calling the arcTo method, add the tangent points of the arc and Ray (x1, y1)-(x2, y2) to the current path as the starting point for the next draw.

During the test, it was found that Firefox and Opera currently do not support this method well. Only Chrome and Safari 4 can plot the correct path.

The two gray lines in the figure are the positions of the two rays after the offset of Four pixels.

<canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.strokeStyle = "#000"; ctx.translate(200, 200); ctx.moveTo(10, 10); ctx.arcTo(110, 60, 10, 110, 30); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "#999"; ctx.moveTo(10, 6); ctx.lineTo(114, 60); ctx.lineTo(10, 114); ctx.stroke(); </script>

Tip: you can modify some code before running

Void arc (in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise );

The arc method is used to draw an arc path and specify the position and size of the arc through the center position, start radians, and end radians.NoIt depends on the start point of the rendering maintained by Context. The orientation of rotation when an arc is drawn is specified by anticlockwise, the last parameter. If it is true, it is clockwise and false is clockwise.

Void quadraticCurveTo (in float cpx, in float cpy, in float x, in float y );

The quadraticCurveTo method is used to draw a quadratic spline curve path. cpx and cpy In the parameter specify the position of the control point, x and y specify the end point, and the start point is the starting point for drawing maintained by Context.

Void bezierCurveTo (in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y );

The bezierCurveTo method is used to draw the beiser curve path, which is similar to quadraticCurveTo. However, the beziercurve has two control points. Therefore, cp1x, cp1y, cp2x, and cp2y are used to specify the locations of the two control points, x and y specify the cursor position.

<canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.translate(10, 10); ctx.beginPath(); ctx.arc(50, 50, 50, 0, Math.PI, true); ctx.stroke(); // quadraticCurveTo ctx.beginPath(); ctx.strokeStyle = "#000"; ctx.moveTo(110, 50); ctx.quadraticCurveTo(160, 0, 210, 50); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "red"; ctx.moveTo(110, 50); ctx.lineTo(160, 0); ctx.lineTo(210, 50); ctx.stroke(); // bezierCurveTo ctx.beginPath(); ctx.strokeStyle = "#000"; ctx.moveTo(220, 50); ctx.bezierCurveTo(250, 0, 280, 10, 320, 50); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "red"; ctx.moveTo(220, 50); ctx.lineTo(250, 0); ctx.lineTo(280, 10); ctx.lineTo(320, 50); ctx.stroke(); </script>

Tip: you can modify some code before running

4. fill, stroke, clip

The fill and stroke methods are well understood and used to fill the path and draw the path line respectively.

The clip method is used to set a editing area for the Canvas. The code after the clip method is called is only valid for the specified editing area and does not affect other areas, this method is useful when local updates are required. By default, the editing area is a rectangle (0, 0) in the upper left corner, with the width and height equal to the width and height of the Canvas element.

When drawing this image, although both of them use fillRect (0, 0,100,100) to fill a 100x100 rectangle, however, the result is that the second filling is only a small part in the middle, because the clip method is used to set the editing area between the two fills, in this way, the second fill will only affect the small area in the middle.

<canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.translate(10, 10); // fill a green rectangle ctx.fillStyle = "green"; ctx.fillRect(0, 0, 100, 100); // set the clipping region ctx.beginPath(); ctx.rect(30, 30, 40, 40); ctx.clip(); ctx.stroke(); // fill a yellow rectangle ctx.fillStyle = "yellow"; ctx.fillRect(0, 0, 100, 100); </script>

Tip: you can modify some code before running

5. clearRect, fillRect, strokeRect

These three methods are not the path method, but are used to directly process the content on the Canvas, which is equivalent to the Canvas background. Calling these three methods will not affect the starting point of Context plotting.

To clear all content on the Canvas, you can directly call context. clearRect (0, 0, width, height) to clear directly, instead of using the Path Method to draw a rectangular path of the same size as the Canvas, and then using the fill method to clear.

Conclusion

Using the Canvas path method, you can use Canvas to process some simple vector images, which will not be distorted during scaling. However, the Canvas path method is not very powerful. At least there are no elliptical paths ......

This article has been written a little long. The path-related content in Cnavas is written so much. I will talk about other things in Canvas later.

References

1. The Canvas Element, WHATWG