16-canvas绘制圆弧

 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             display: block;
13             margin: 0 auto;
14             background: red;
15         }
16     </style>
17 </head>
18 <body>
19 <canvas width="500" height="400"></canvas>
20 <script>
21     /*
22     1.基本概念
23     角度: 一个圆360度, 一个半圆是180度
24     弧度: 一个圆2π, 一个半圆π
25 
26     2.角度转换弧度公式:
27     ∵ 180角度 = π弧度
28     ∴ 1角度 = π/180;
29     ∴ 弧度 = 角度 * π/180;
30        90角度 * π/180 = π/2
31 
32     3.弧度转换角度公式:
33     ∵ π弧度 = 180角度
34     ∴ 1弧度 = 180/π
35     ∴ 角度 = 弧度 * 180/π
36        π/2 * 180/π = 180/2 = 90度
37     * */
38     // 1.拿到canvas
39     let oCanvas = document.querySelector("canvas");
40     // 2.从canvas中拿到绘图工具
41     let oCtx = oCanvas.getContext("2d");
42     /*
43     x, y: 确定圆心
44     radius: 确定半径
45     startAngle: 确定开始的弧度   (0代表的是3点钟那个位置的点)
46     endAngle: 确定结束的弧度
47     Boolean: 默认是false, false就是顺时针绘制, true就是逆时针绘制
48     context.arc(x, y, radius, startAngle, endAngle, Boolean);
49     * */
50     oCtx.arc(100, 100, 100, 0, Math.PI);
51     // 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>