16-canvas drawn arc

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>16-Canvas绘制圆弧</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         canvas{
12             the display : Block ; 
13 is              margin : 0 Auto ; 
14              background : Red ; 
15          } 
16      </ style > 
. 17  </ head > 
18 is  < body > 
. 19  < Canvas width = "500" height = "400" > </ Canvas > 
20 is  < Script > 
21 is      / * 
22 is      1. basic concepts
 23      angle: 360 degrees of a circle, a semicircle is 180 degrees
 24     Radians: a circle 2π, a semicircle [pi]
 25  
26 is      2. radian angle conversion formula:
 27      ∵ 180 [angle = [pi] radians
 28      ∴ angle. 1 [pi] = / 180 [;
 29      ∴ = angle in radians * π / 180 [;
 30         90 angle * π / [pi] = 180/2
 31 is  
32      3. radians angle formula:
 33 is      ∵ = 180 [pi] radian angle
 34 is      ∴. 1 rad = 180 / [pi]
 35      ∴ angle = 180 rad * / [pi]
 36         [pi] / 2 * 180 / [pi] = 180/2 = 90
 37      * * / 
38      // 1. get Canvas 
39      the let oCanvas = document.querySelector ( " Canvas " );
 40      //2. From the drawing tools to get the canvas 
41 is      the let oCtx = oCanvas.getContext ( " 2D " );
 42 is      / * 
43 is      X, Y: determining the circle center
 44 is      RADIUS: determining the radius
 45      startAngle: determining radians (0 represents the start of the 3 that point o'clock position)
 46 is      endAngle: determining the end of the arc
 47      Boolean: default is false, false is drawn clockwise, true is drawn counterclockwise
 48      context.arc (X, Y, RADIUS, startAngle, endAngle, Boolean);
 49      * * / 
50      oCtx.arc ( 100 , 100 , 100 , 0 , Math.PI);
 51 is      // oCtx.arc(100, 100, 100, 0, Math.PI, true);
52     // oCtx.arc(100, 100, 100, 0, Math.PI * 2);
53     oCtx.stroke();
54 </script>
55 </body>
56 </html>
Guess you like
