經過 canvas 教程(二) 繪制直線 我們知道了 canvas 的直線是怎么繪制的
而本次是給大家帶來曲線相關的繪制
繪制圓形
在 canvas 中我們可以使用 arc 方法畫一個圓
context.beginPath();
context.arc(x, y, r, startRadian, endRadian, antclockwise);
context.closePath();
我們是第一次用到 beginPath 和 closePath 這兩個方法，首先這兩個方法故名思意就是開始路徑和結束路徑，一般都是配合使用的。
對於 arc 的方法的參數，x 和 y 代表的是圓心的坐標，r 是指圓的半徑，startRadian 和 endRadian 是指開始的角度和結束的角度
注意：這里是以弧度為單位的！
1π 等於 180 度，所以我們這里寫的時候一般是寫成 度數*Math.PI/180，方便我們一眼看出度數是多少
而 antclockwise 是指是否是逆時針繪制，默認是 false
有朋友會說了，我試了一下，寫了這三句沒有效果啊，怎么回事？沒有效果是肯定的，因為這三句僅僅只是描述了一個路徑！並沒有繪制！所以我們可以用上繪制直線中使用的“描邊”stroke 或者“填充”fill
描邊三角形：
context.beginPath();
context.arc(x, y, r, startRadian, endRadian, antclockwise);
context.closePath();
context.strokeStyle = '顏色值';
context.stroke();
//描邊 填充fill 同理 就不寫了
繪制弧線
弧線是圓的一部分，那么如何繪制一個弧度呢，有朋友就發現了我們剛才的 arc 也有一個弧度，
只是兩個弧度之間的點有連接的一條直線，那么我去掉直線是不是就是弧線了呢？賓果！就是這樣，只要你去掉 closePath 就會發現你畫了一條弧線了 2333
好了那么 canvas 其實還有一個畫弧線的方法 arcTo(x1,y1,x2,y2,radius);
我們要通過 arcTo 畫一條弧線，需要提供三個點的坐標，開始點一般是通過 moveTo 和 lineTo 提供
x1 和 y1 是控制點，x2 和 y2 是結束點，radius 則是圓弧的半徑
arcTo()方法將利用當前端點、端點 1(x1,y1)和端點 2(x2,y2)這三個點所形成的夾角
然后繪制一段與夾角的兩邊相切並且半徑為 radius 的圓上的弧線
弧線的起點就是當前端點所在邊與圓的切點
弧線的終點就是端點 2(x2,y2)所在邊與圓的切點，並且繪制的弧線是兩個切點之間長度最短的那個圓弧。
如果當前端點不是弧線起點，arcTo()方法還將添加一條當前端點到弧線起點的直線線段。
我畫一個圖：
咳咳，別介意畫工，大概就是這樣的，開始點是我們的當前的點就是使用 arcTo 之前的點
下面我寫兩段代碼演示一下起點一致和起點不一致的情況
context.moveTo(50, 50);
context.lineTo(150, 50);
ctx.arcTo(200,50, 200,100, 50);
ctx.stroke();
context.moveTo(50, 50);
ctx.arcTo(200,50, 200,100, 50);
ctx.stroke();
是不是發現結果是一樣的！
其中區別就細細品味吧，數學知識可以補一補
繪制貝塞爾曲線
百度百科：貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程序的數學曲線。一般的矢量圖形軟件通過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。貝塞爾曲線是計算機圖形學中相當重要的參數曲線，在一些比較成熟的位圖軟件中也有貝塞爾曲線工具，如PhotoShop等。
更多的就大家自行搜索吧，由於一次貝塞爾曲線就是直線，這里就不講了，我們直接講 canvas 如何繪制二次貝塞爾曲線
二次貝塞爾曲線
cnavas 提供了一個方法 quadraticCurveTo(x1,y1,x2,y2)， 其中參數 x1 和 y1 是控制點，x2 和 y2 是結束點
起始點是調用方法之前的點
動圖我不會畫，但是我之前網上找到一個:
context.strokeStyle = 'red';
context.beginPath();
context.moveTo(0, 150);
context.quadraticCurveTo(75, 50, 200, 100);
context.stroke();
context.strokeStyle = 'green';
context.beginPath();
context.moveTo(75, 50);
context.lineTo(0, 150);
context.moveTo(75, 50);
context.lineTo(200, 100);
context.stroke();
代碼效果:
三次貝塞爾曲線
三次貝塞爾曲線的方法則是 bezierCurveTo(x1,y1,x2,y2,x3,y3)
其中參數 x1、y1，x2、y2 是控制點，x3 和 y3 是結束點
就是提供多一個控制點！
畫圖原理是這樣:
這個例子就不寫了，大家照着二次貝塞爾曲線的例子，練習一下！
結束
本次講了：繪制圓形、繪制弧線、二次貝賽爾曲線、三次貝賽爾曲線，大家學會了多少呢？
好了，本次的教程就到這里結束了，下次將為大家帶來線條和文本的操作