Draw curve of HTML5 canvas Basic Drawing, html5canvas

Draw curve of HTML5 canvas Basic Drawing, html5canvas

<Canvas> </canvas>It is a new label added in HTML5 for drawing graphics. In fact, this label is the same as other labels. Its special feature is that this label can obtain a CanvasRenderingContext2D object, we can use JavaScript scripts to control this object for plotting.

<Canvas> </canvas>It is just a container for drawing graphics. In addition to attributes such as id, class, and style, there are also attributes of height and width. There are three steps to draw an element on the <canvas> element:

1. Obtain the DOM object corresponding to the <canvas> element. This is a Canvas object;
2. Call the getContext () method of the Canvas object to obtain a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for plotting.

Draw a curve

There are four functions as follows:

• Context. arc (x, y, r, sAngle, eAngle, counterclockwise );Used to create an ARC/curve (used to create a circle or a part of a circle ). Meaning of received parameters:
| Parameter | meaning |
|: ----- |
| X coordinate of the center of the circle |
| Y coordinate of the center of the circle |
| R | radius of the circle |
| SAngle | start angle, in radians (three o'clock of the arc circle is 0 degrees) |
| EAngle | end angle, in radians |
| Counterclockwise | optional. It is required that the drawing should be clockwise or clockwise. False = clockwise, true = clockwise |

Below are several examples of several arc () functions:

Copy the content to the clipboard using JavaScript Code

1. Var canvas = document. getElementById ("canvas ");
2. Var context = canvas. getContext ("2d ");
4. Context. strokeStyle = "# F22D0D ";
5. Context. lineWidth = "2 ";
6. // Draw a circle
7. Context. beginPath ();
8. Context. arc (100,100, 40, 0, 2 * Math. PI );
9. Context. stroke ();
11. // Draw a semi-circle
12. Context. beginPath ();
13. Context. arc (200,100, Math. PI );
14. Context. stroke ();
16. // Draw a semi-circle, counterclockwise
17. Context. beginPath ();
18. Context. arc (300,100, Math. PI, true );
19. Context. stroke ();
21. // Draw a closed semi-circle
22. Context. beginPath ();
23. Context. arc (400,100, Math. PI );
24. Context. closePath ();
25. Context. stroke ();

The effect is as follows:

• Context. arcTo (x1, y1, x2, y2, r );Create an ARC/curve between two tangent lines on the canvas. Meaning of received parameters:

Note that the starting point of the curve drawn by the arcTo function needs to be set through the moveTo () function. The following uses the arcTo function to draw a rounded rectangle:

Copy the content to the clipboard using JavaScript Code

1. Function createRoundRect (context, x1, y1, width, height, radius)
2. {
3. // Move to the upper left corner
4. Context. moveTo (x1 + radius, y1 );
5. // Add a line segment connected to the upper-right corner
6. Context. lineTo (x1 + width-radius, y1 );
7. // Add an arc
8. Context. arcTo (x1 + width, y1, x1 + width, y1 + radius, radius );
9. // Add a line segment connected to the bottom right corner
10. Context. lineTo (x1 + width, y1 + height-radius );
11. // Add an arc
12. Context. arcTo (x1 + width, y1 + height, x1 + width-radius, y1 + height, radius );
13. // Add a line segment connected to the lower left corner
14. Context. lineTo (x1 + radius, y1 + height );
15. // Add an arc
16. Context. arcTo (x1, y1 + height, x1, y1 + height-radius, radius );
17. // Add a line segment connected to the upper left corner
18. Context. lineTo (x1, y1 + radius );
19. // Add an arc
20. Context. arcTo (x1, y1, x1 + radius, y1, radius );
21. Context. closePath ();
22. }
23. // Obtain the DOM object corresponding to the canvas Element
24. Var canvas = document. getElementById ('mc ');
25. // Obtain the CanvasRenderingContext2D object drawn on the canvas
26. Var context = canvas. getContext ('2d ');
27. Context. lineWidth = 3;
28. Context. strokeStyle = "# F9230B ";
29. CreateRoundRect (context, 30, 30,400,200, 50 );
30. Context. stroke ();

The effect is as follows:

• Context. quadraticCurveTo (cpx, cpy, x, y );Draw a second beset curve. The parameter meanings are as follows:

The starting point of the curve is the last point in the current path. If the path does not exist, use the beginPath () and moveTo () Methods to define the start point.

 • Context. bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y );Draw a three-time besell curve with the following parameters:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.