## 第四课时：弧线 以下方法用于绘制弧形。 * `CanvasRenderingContext2D.arc()`：通过指定圆心和半径绘制弧形。 * `CanvasRenderingContext2D.arcTo()`：通过指定两根切线和半径绘制弧形。 `CanvasRenderingContext2D.arc()`主要用来绘制圆形或扇形。 ~~~ // 格式 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) // 实例 ctx.arc(5, 5, 5, 0, 2 * Math.PI, true) ~~~ `arc()`方法的`x`和`y`参数是圆心坐标，`radius`是半径，`startAngle`和`endAngle`则是扇形的起始角度和终止角度（以弧度表示），`anticlockwise`表示做图时应该逆时针画（`true`）还是顺时针画（`false`），这个参数用来控制扇形的方向（比如上半圆还是下半圆）。 下面是绘制实心圆形的例子。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(60, 60, 50, 0, Math.PI * 2, true); ctx.fill(); ~~~ 上面代码绘制了一个半径50，起始角度为0，终止角度为 2 \* PI 的完整的圆。 绘制空心半圆的例子。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 20); ctx.arc(100, 20, 50, 0, Math.PI, false); ctx.stroke(); ~~~ `CanvasRenderingContext2D.arcTo()`方法主要用来绘制圆弧，需要给出两个点的坐标，当前点与第一个点形成一条直线，第一个点与第二个点形成另一条直线，然后画出与这两根直线相切的弧线。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 0); ctx.arcTo(50, 50, 100, 0, 25); ctx.lineTo(100, 0); ctx.stroke(); ~~~ 上面代码中，`arcTo()`有5个参数，前两个参数是第一个点的坐标，第三个参数和第四个参数是第二个点的坐标，第五个参数是半径。然后，`(0, 0)`与`(50, 50)`形成一条直线，然后`(50, 50)`与`(100, 0)`形成第二条直线。弧线就是与这两根直线相切的部分。