Drawing arcs using the canvas element-art method

Recently learning HTML5, I found that canvas is really great, the canvas element is a plane to draw, and we use JavaScript to configure and manipulate it. I'll say here. Arc method draws an arc, by the way, the basic knowledge involved.

First look at this code:

var Ctx=document.getelementbyid ("Canvas"). GetContext ("2d");

/* This is the Getcontex method that invokes the Htmlcanvaselement object, returning the drawing context for the canvas, which is in 2d context

Ctx.fillstyle= "Yellow";
Ctx.strokestyle= "BLACK";

/* These two code is to set the fill and stroke style, here is for you to draw a graphic fill color, the solid call FillStyle, the Hollow call Strokestyle, the corresponding graphic text of the solid hollow style will not mention

ctx.linewidth=3;

/* This is the width used to draw the line

Ctx.strokerect (250,20,100,200);

/* This is to draw a hollow rectangle, the first parameter and the second parameter represent the offset value from the top left corner of the canvas element, and the last two parameters represent the width and height of the rectangle.

/* The next step is to use the path drawing section, slightly mentioning the basic order of drawing a path:

Call the Beginpath method;

Using the MoveTo method to move the starting point;

Using Arc and LineTo method to draw sub-path;

Call the Closepath method (optional), which is used primarily to close the drawn path

Call the fill and stroke methods, here is the fill, the above mentioned Closepath will affect the line drawn by the stroke */

/* Here is the call to Arc method to draw the arc, is also the focus of this article OH

Ctx.beginpath ();
Ctx.arc (70,70,60,0,math.pi*2,true);

/* Note that the angle in the canvas is not expressed in mathematical degrees but in radians, for example, 360 degrees is 2*math.pi

Ctx.stroke ();

Ctx.fill ();

Look at the above code, first of all the arc parameters. Arc (x,y,rad,startangle,endaangle,direction), X, Y represents the center of the arc, the third parameter represents the radius of the arc, the fourth represents the starting angle, the fifth represents the end angle, the last represents the direction of the arc, The default here is the clockwise direction. It is worth noting that the direction parameter here means whether it is counterclockwise, so when this parameter is set to True, it becomes counterclockwise. This distinction is explained in detail later

The upper part actually draws a full circle.

Note that the starting angle here is almost the same as in math, where you take your circle as a coordinate with the center point as the origin, and 0 is the positive half of the x-axis.

When the last parameter here is true, it indicates a counter-clockwise direction, the fourth and fifth parameters are represented from 90 degrees to 180 degrees, note that the angle starting point and the terminating point here are in accordance with the normal axis clockwise (not to be confused with mathematics, for example, the negative half axis of the Y axis represents 2/ Math.pi,x Negative half axis represents Math.PI. The counterclockwise direction means the direction of the Radian, as in the direction of the line.

Ctx.beginpath ();
Ctx.arc (200,70,60,math.pi/2,math.pi,true);
Ctx.fill ();
Ctx.stroke ();

Demonstrates a false-

Ctx.beginpath ();
Ctx.arc (200,70,60,math.pi/2,math.pi,flase);
Ctx.fill ();
Ctx.stroke ();

With this in hand, there are some tricks you can use to draw interesting graphics, such as:

Ctx.beginpath ();
var val=0;
for (Var i=0;i<5;i++) {
Ctx.arc (350,70,60,val,val+math.pi/4,false);
VAL+=MATH.PI/2;
}
Ctx.closepath;
Ctx.fill ();
Ctx.stroke ();

/* This figure is to divide the whole circle into four parts, each moving 2/math.pi in the loop, and each of these 2/math.pi is divided into two parts, half of which are curved and half straight. */

Drawing arcs using the canvas element-art method