Canvas drawing Circles and arcs (iii)

Use the context method to draw circles and arcs

Context.arc (x,y,radius,startingangle,endingangle,anticlockwise);

X, Y: Represents the center coordinate

Radius: radius of Circle

StartingAngle: Draws the starting position of the arc (in radians, such as 0,0.5*math.pi ...). ）

Endingangle: Draw the ending position of an arc

Anticlockwise:false and True,true are counterclockwise and false indicates clockwise. Do not write default false

As with a straight line, you can draw a circle as a straight line, but this line is special, it's a straight line with radians.

1. Draw Center (0,10) Radius 100, from 0 π to 0.5 π to draw an arc clockwise

  context.strokestyle= ' Red ';  Context.arc (0,10,100,0,0.5*math.pi);  Context.stroke ();

2. Draw the center of the Circle (110,110) Radius 100, draw an arc from 0 π to 0.5 π counterclockwise

   context.strokestyle= ' Red ';   Context.arc (110,110,100,0,0.5*math.pi,true);   Context.stroke ();

3. As with the drawing line,. Context.fill (); The default is to connect the first, fill the color

1    Context.strokestyle= ' Black '; 2    Context.linewidth=5; 3    Context.arc (110,110,100,0,0.5*math.pi,true); 4    context.fillstyle= "Red"; 5    Context.fill (); 6    Context.stroke ();

4. Can not need to draw context.stroke (), directly fill the color, just without the boundary

5. Beginpath (); Closepath (); Make the first path connected Beginpath (): Flag starts a path Closepath (); The table ends a path, and if there is no first connection, connect it.

1    Context.strokestyle= ' Black '; 2    Context.linewidth=5; 3    Context.beginpath (); 4    Context.arc (110,110,100,0,0.5*math.pi,true); 5    Context.closepath (); 6    Context.stroke ();

6.closePath () can not write, does not affect the state of the lock, but does not automatically close the ends of the line

1    Context.strokestyle= ' Black '; 2    Context.linewidth=5; 3    Context.beginpath (); 4    Context.arc (110,110,100,0,0.5*math.pi,true); 5    // Context.closepath (); 6    context.fillstyle= "Red"; 7    Context.fill (); 8    Context.stroke ();

Canvas drawing Circles and arcs (iii)