HTML5 Canvas Drawing Circle

HTML5 Canvas Drawing Circle

1. Design Source code

<! DOCTYPE html>

2. Design Results


3. Analysis and explanation
(1) Create a path
Context.beginpath ();

(2) Create a circular path
Context.arc (600,300,200,0,math.pi*2,true);
The first parameter x: The beginning of the horizontal axis
Second parameter y: Start ordinate
Radius of the third parameter: radius of a circle
Fourth parameter startangle: Start angle
Fifth parameter endangle: End angle
Sixth parameter anticlockwise: whether to draw in a clockwise direction

(3) Close the path
Context.closepath ();

(4) Set drawing style
Context.fillstyle= "#0000ff";
Context.fill ();
HTML5 Canvas Drawing Circle