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>