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>