HTML5 Canvas Basic Drawing Curve

<canvas> </canvas> is a newly added label in HTML5 for drawing graphics. In fact, this label is the same as other tags. Its special thing is that the label can obtain a CanvasRenderingContext2D object. We can use the JavaScript script. Control the object for drawing.

<canvas> </canvas> is just a container drawn graphic. In addition to ID, class, style and other attributes, there are Height and Width properties. There are three steps for drawing on the <canvas >> elements:

1. Get the DOM object corresponding to the <Canvas> element, which is a Canvas object;

2. Call the getContext () method of Canvas object to get a CanvasrenderingContext2D object;

3. Call the CanvasRenderingContext2D object for drawing.

Draw curve

There are four functions with the drawing curve, which are:

• Context.arc (X, Y, R, SANGLE, EANGLE, COUNTERCLOCKWISE); used to create arc/curves (used to create circles or partial circles). Receive parameter meaning:

| Parameters | Meaning |

| --- |: --- |

| x | The X coordinate of the center of the circle |

| y | The center of the center of the circle |

| R | The radius of the circle |

| SANGLE | Starting angle, with the arc meter (the three -point position of the arc is 0 degrees) |

| EANGLE | Ending angle, with arc meter |

| Countclockwise | Optional. It should be painted counterclockwise or clockwise. FALSE = clockwise, true = counterclockwise |

Below are several examples of several ARC () functions:

JavaScript Code Copy content to clipboard