Canvas 按路径绘制弧
平面图形的世界里，不仅有矩形，还有弧
弧，就是以某个点(x0,y0) 作为起始点(蓝色)，给定两个参考点(x1,y1) 、 (x2,y2) 还有一个半径组成的绘制出来的图形
又是烧脑的数学知识，关系到切线原理
说直白一点，就是以第一个参考点作为顶点，由 3 个点组成的夹角的内切圆弧，弧的大小取决于给定的半径 然后起始点与圆弧的切点之间以直线连接
虽然图形上看是内切圆，但是，实际上不是内切圆
Canvas 中的 2D 渲染上下文文提供了 arcTo() 方法用于绘制这种圆弧
arcTo() 方法
arcTo() 根据控制点和半径绘制圆弧路径，使用当前的描点(前一个 moveTo() 或 lineTo() 等函数的止点)，根据当前描点与给定的控制点1连接的直线，和控制点1与控制点2连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径
void ctx.arcTo(x1, y1, x2, y2, radius);
| 参数 | 说明 |
|---|---|
| x1 | 第一个控制点的 x 轴坐标 |
| y1 | 第一个控制点的 y 轴坐标 |
| x2 | 第二个控制点的 x 轴坐标 |
| y2 | 第二个控制点的 y 轴坐标 |
| radius | 圆弧的半径 |
注意：
arcTo()方法绘制出来的也是虚拟路径，需要使用stroke()实体化
范例
例如下面的代码以 (50,50) 作为基点, (200,80) 和 (120,300) 作为控制点，绘制一个半径为 50 的圆弧
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-1" width="300" height="200"> </canvas> <script> var c = document.getElementById("canvas-1"); var ctx = c.getContext("2d"); ctx.strokeStyle = "green" ctx.beginPath(); ctx.moveTo(50,50); ctx.arcTo(200,300,120,300,10*Math.PI); ctx.stroke(); </script>
运行结果如下
是不是看起来很诧异，我们画几条辅助线
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-2" width="300" height="300"> </canvas> <script> var c = document.getElementById("canvas-2"); var ctx = c.getContext("2d"); ctx.strokeStyle="red" ctx.beginPath() ctx.moveTo(50,50); ctx.lineTo(200,300); ctx.lineTo(120,300); ctx.closePath(); ctx.stroke(); ctx.strokeStyle = "green" ctx.beginPath(); ctx.moveTo(50,50); ctx.arcTo(200,300,120,300,10*Math.PI); ctx.stroke(); </script>
运行结果如下