HTML5CANVAS: Drawing path-

An HTML5canvas path connects a series of vertices by drawing commands. These vertices form a straight line or curve. The path can be used to draw various types of images on HTML5canvas: straight lines, circles, polygon, etc ....,.

An HTML5 canvas path connects a series of vertices by drawing commands. These vertices form a straight line or curve. Paths can be used to draw various types of images on HTML5 canvas: straight lines, circles, polygon, and so on. Path rendering is the core of canvas and must be well understood and mastered.

　　 Start or end a path

To start and close a path, you can use the beginPath () and closePath () functions in the 2D context. For example:

1. Var canvas = document. getElementById ("ex1 ");
   
2. Var context = canvas. getContext ("2d ");
   
3. 
   
4. Context. beginPath ();
   
5. 
   
6. //... Draw the path
   
7. 
   
8. Context. closePath ();

　　 MoveTo () function

When you draw a path in the canvas, you can imagine that you are using a "virtual pen ". This virtual pen is always located at a certain position. You can use the moveTo (x, y) function in the 2D context to move this virtual pen. For example, the following code:

1. Context. moveTo (10, 10 );

In this example, the "virtual pen" is moved to the coordinate point (10, 10.

　　 LineTo () function

The lineTo function is used to draw a straight line from the current position of the virtual pen to the point specified by the lineTo () function. The following is an example:

1. Context. beginPath ();
   
2. 
   
3. Context. moveTo (10, 10 );
   
4. Context. lineTo (50, 50 );
   
5. 
   
6. Context. closePath ();

In this example, move the virtual pen to the coordinate point (10, 10), and draw a straight line from this point to the coordinate point (50, 50.

The lineTo () function also moves the virtual pen to the end point of the execution. In the above example, the position is moved to (50, 50.

　　 Stroke () function + fill () function

You will not actually draw anything on the canvas until you have not notified the 2D context to draw the path. You can use the stroke () or fill () function to notify the 2D context.

The stroke () function is used to operate the outer contour of a specified image in a path.

The fill () function is used to fill in the image specified by the path operation.

The following example shows how to use the stroke () or fill () functions.

1. Context. beginPath ();
   
2. Context. moveTo (10, 10 );
   
3. Context. lineTo (60, 50 );
   
4. Context. lineTo (110,50 );
   
5. Context. lineTo (10, 10 );
   
6. Context. stroke ();
   
7. Context. closePath ();
   
8. 
   
9. Context. beginPath ();
   
10. Context. moveTo (100,10 );
    
11. Context. lineTo (150,50 );
    
12. Context. lineTo (200,50 );
    
13. Context. lineTo (100,10 );
    
14. Context. fill ();
    
15. Context. closePath ();

The returned results of the code above are as follows:

　　 Line width

You can use the lineWidth attribute of the 2D context to set the width of the drawn line. The following is an example:

1. Context. lineWidth = 10;

In the preceding example, the width of the drawn line is set to 10 pixels.

The following example draws three straight lines whose widths are 1, 5 and 10.

When the line width you draw is greater than 1, the extended line width is evenly distributed to both sides of the Line center. For distance, if you draw a straight line from (10, 10) to (), and the width of the line is 10, it is actually drawn from (10, 5, then expand to the () Point and draw horizontally to the (, 5) and () points, just like drawing a rectangle.

　　 LINE CAP)

When using a path to draw a line, you can set the line Header style. The lineCap attribute of the 2D context is used to set the line Header style. It has three optional values:

• Butt
• Round
• Square
  

The butt style line header is flat and orthogonal to the line.

The line header in the round style is the line header with a rounded corner, and the radius of the circle is equal to half of the line width.

The line header of the square style draws a rectangle at the end of the line. The size of the rectangle is: the width of the line X the width of the line/2.

Below are several examples of lines with different line headers. The width of all lines is 10. The lineCap value of the most general line is butt, The lineCap value of the middle line is round, and the lineCap value of the rightmost line is square.

The value of lineCap is very similar to that of square. Sometimes it is difficult to distinguish. Here are a few small examples, from which you can see the tiny differences between them. There are three groups of lines below. The lineCap attribute of each group's left (or top) line is butt, and the lineCap attribute of the right (or bottom) line is square.

As shown above, the line of the square Line header is longer than that of the butt line header.

　　 Line Connection

The lineJoin attribute of the 2D context is used to define how the points at the two line connections are drawn. The point connecting two lines is called a "connection point ". The lineJoin attribute has the following three values:

• Miter
• Bevel
• Round
  

The following is the sample code for the three values:

1. Context. lineJoin = "miter ";
   
2. Context. lineJoin = "bevel ";
   
3. Context. lineJoin = "round ";

The miter connection point is a triangle connection point.

The bevel connection point is a flat connection point.

The round connection point is a rounded corner connection point.

The following is an example of three line join points. The lineJoin attributes from left to right are miter, bevel, and round.

　　 Draw a curve

The arc () function in 2D context can be used to draw a curve. The arc () function has six parameters:

• X: The X coordinate position of the center of the arc.
• Y: Y coordinate of the center of the arc.
• Radius: the radius of the arc.
• StartAngle: The angle radian of the arc.
• EndAngle: The radian of the end of an arc.
• Anticlockwise: draws an arc clockwise or clockwise if it is set to false.
  

The following is an example code:

1. Context. lineWidth = 3;
   
2. 
   
3. Var x = 50;
   
4. Var y = 50;
   
5. Var radius = 25;
   
6. Var startAngle = (Math. PI/180) * 45;
   
7. Var endAngle = (Math. PI/180) * 180;
   
8. Var anticlockwise = false;
   
9. 
   
10. Context. beginPath ();
    
11. Context. arc (x, y, radius, startAngle, endAngle, anticlockwise );
    
12. Context. stroke ();
    
13. Context. closePath ();

The code above draws an arc with a center point (50, 50) coordinate point with a radius of 25 and ends from 45 degrees to 180 degrees.

The returned results of the above Code are as follows:

In the preceding example, if you set anticlockwise to true, the following result is displayed:

If you want to spend a complete circle, you can simply set startAngle to 0 and endAngle to 2 * Math. PI, which is equivalent to (Math. PI/180) * 360.

　　 ArcTo () function

In the 2D context, there is an arcTo () function, which is used to draw a curve from the current point to the point specified by the parameter. The radius of the curve is also specified by the parameter. Its syntax is: arcTo (x1, y1, x2, y2, radius ). Note: In the parameter, x1, y1, x2, y2 indicates the control point of this point. The arcTo () function can be imitated using the lineTo () and arc functions.

　　 QuadraticCurveTo () function

The quadraticCurveTo () function is used to draw a quadratic Beitz curve. This curve is controlled by a control point. Its syntax is quadraticCurveTo (cp1x, cp1y, x, y ). The following is an example code:

1. Context. lineWidth = 3;
   
2. 
   
3. Var fromX = 50;
   
4. Var fromY = 50;
   
5. Var tox= 100;
   
6. Var toY = 50;
   
7. Var cpX = 75;
   
8. Var cpY = 100;
   
9. 
   
10. Context. beginPath ();
    
11. Context. moveTo (fromX, fromY );
    
12. Context. quadraticCurveTo (cpX, cpY, toX, toY );
    
13. Context. stroke ();
    
14. Context. closePath ();

The code above draws a quadratic beam curve from (50, 50) to (75,100, 50). The control point of this curve is ). The result is as follows:

Take a closer look, there is a small point below the curve, that is the control point of this curve. (This point is for everyone to see)


For details about control points, refer to the following image:

　　 BezierCurveTo () function

The bezierCurveTo () function is used to draw a cubic Beitz curve from one point to another. The cubic Beitz curve has two control points, while the quadratic Beitz curve has only one control point. Its syntax is: bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y ). The following is an example:

1. Context. lineWidth = 3;
   
2. 
   
3. Var fromX = 50;
   
4. Var fromY = 50;
   
5. Var tox= 300;
   
6. Var toY = 50;
   
7. Var cp1X = 100;
   
8. Var cp1Y = 100;
   
9. Var cp2X = 250;
   
10. Var cp2Y = 100;
    
11. 
    
12. Context. beginPath ();
    
13. Context. moveTo (fromX, fromY );
    
14. Context. bezierCurveTo (cp1X, cp1Y, cp2X, cp2Y, toX, toY );
    
15. Context. stroke ();
    
16. Context. closePath ();

This Code draws a cubic beam curve from (50, 50) to (100,100, 50). The two control points are: (250,100) and ). The result is as follows:

The two dots below the curve are two control points. They are not part of the curve.

The following is a different example. Its start point and end point are the same as the previous example, but the control point is different from the previous example.

1. Context. lineWidth = 3;
   
2. 
   
3. Var fromX = 50;
   
4. Var fromY = 50;
   
5. Var tox= 300;
   
6. Var toY = 50;
   
7. Var cp1X = 100;
   
8. Var cp1Y = 10;
   
9. Var cp2X = 250;
   
10. Var cp2Y = 100;
    
11. 
    
12. Context. beginPath ();
    
13. Context. moveTo (fromX, fromY );
    
14. Context. bezierCurveTo (cp1X, cp1Y, cp2X, cp2Y, toX, toY );
    
15. Context. stroke ();
    
16. Context. closePath ();

The result of the above Code is as follows:

At the end of the article, we reference an example on MDN, which uses the Canvas path to draw a small scenario of the "douman" game:

The implementation code is as follows:

1. Function draw (){
   
2. Var canvas = document. getElementById ('canvas ');
   
3. If (canvas. getContext ){
   
4. Var ctx = canvas. getContext ('2d ');
   
5. 
   
6. RoundedRect (ctx, 12,12, 150,150, 15 );
   
7. RoundedRect (ctx, 19, 19, 150,150, 9 );
   
8. RoundedRect (ctx, 53,53, 49,33, 10 );
   
9. RoundedRect (ctx, 53,119, 6 );
   
10. RoundedRect (ctx, 135,53, 49,33, 10 );
    
11. RoundedRect (ctx, 135,119, 10 );
    
12. 
    
13. Ctx. beginPath ();
    
14. Ctx. arc (37,37, 13, Math. PI/7,-Math. PI/7, false );
    
15. Ctx. lineTo (31, 37 );
    
16. Ctx. fill ();
    
17. 
    
18. For (var I = 0; I <8; I ++ ){
    
19. Ctx. fillRect (51 + I * 16, 35, 4 );
    
20. }
    
21. 
    
22. For (I = 0; I <6; I ++ ){
    
23. Ctx. fillRect (115,51 + I * 16,4, 4 );
    
24. }
    
25. 
    
26. For (I = 0; I <8; I ++ ){
    
27. Ctx. fillRect (51 + I * 16, 99, 4 );
    
28. }
    
29. 
    
30. Ctx. beginPath ();
    
31. Ctx. moveTo (83,116 );
    
32. Ctx. lineTo (83,102 );
    
33. Ctx. bezierCurveTo (83,94, 89,88, 97,88 );
    
34. Ctx. bezierCurveTo (111,102, 88 );
    
35. Ctx. lineTo (111,116 );
    
36. Ctx. lineTo (106.333, 111.333 );
    
37. Ctx. lineTo (101.666, 116 );
    
38. Ctx. lineTo (97,111.333 );
    
39. Ctx. lineTo (92.333, 116 );
    
40. Ctx. lineTo (87.666, 111.333 );
    
41. Ctx. lineTo (83,116 );
    
42. Ctx. fill ();
    
43. 
    
44. Ctx. fillStyle = "white ";
    
45. Ctx. beginPath ();
    
46. Ctx. moveTo (91,96 );
    
47. Ctx. bezierCurveTo (87,101 );
    
48. Ctx. bezierCurveTo (87,103, 88,106, 91,106 );
    
49. Ctx. bezierCurveTo (94,106, 95,103, 95,101 );
    
50. Ctx. bezierCurveTo (, 99 );
    
51. Ctx. moveTo );
    
52. Ctx. bezierCurveTo (99,101, 96 );
    
53. Ctx. bezierCurveTo (99,103,100,106,103,106 );
    
54. Ctx. bezierCurveTo (106,106,107,103,107,101 );
    
55. Ctx. bezierCurveTo (107,99, 106,96, 103,96 );
    
56. Ctx. fill ();
    
57. 
    
58. Ctx. fillStyle = "black ";
    
59. Ctx. beginPath ();
    
60. Ctx. arc (101,102, Math. PI * 2, true );
    
61. Ctx. fill ();
    
62. 
    
63. Ctx. beginPath ();
    
64. Ctx. arc (89,102, Math. PI * 2, true );
    
65. Ctx. fill ();
    
66. }
    
67. }
    
68. 
    
69. // A utility function to draw a rectangle with rounded corners.
    
70. 
    
71. Function roundedRect (ctx, x, y, width, height, radius ){
    
72. Ctx. beginPath ();
    
73. Ctx. moveTo (x, y + radius );
    
74. Ctx. lineTo (x, y + height-radius );
    
75. Ctx. quadraticCurveTo (x, y + height, x + radius, y + height );
    
76. Ctx. lineTo (x + width-radius, y + height );
    
77. Ctx. quadraticCurveTo (x + width, y + height, x + width, y + height-radius );
    
78. Ctx. lineTo (x + width, y + radius );
    
79. Ctx. quadraticCurveTo (x + width, y, x + width-radius, y );
    
80. Ctx. lineTo (x + radius, y );
    
81. Ctx. quadraticCurveTo (x, y, x, y + radius );
    
82. Ctx. stroke ();
    
83. }

This article copyright belongs to the jQuery house, reproduced please indicate the source: http://www.htmleaf.com/ziliaoku/... g/201507122217.html