## 第四課時：弧線 以下方法用于繪制弧形。 * `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)`形成第二條直線。弧線就是與這兩根直線相切的部分。