canvas教程(三) 繪製曲線

通過 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()方法還將添加一條當前端點到弧線起點的直線線段。

我畫一個圖：

<img src="http://images.cnblogs.com/cnblogs_com/cnyball/1508697/o_1563765710(1).jpg"/>

咳咳，別介意畫工，大概就是這樣的，開始點是咱們的當前的點就是使用 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 是結束點

起始點是調用方法以前的點

動圖我不會畫，可是我以前網上找到一個:

<img src="https://images0.cnblogs.com/blog/553761/201501/051752090937545.gif"/>

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();

代碼效果:

<img src="http://images.cnblogs.com/cnblogs_com/cnyball/1508697/o_1563768823.jpg"/>

三次貝塞爾曲線

三次貝塞爾曲線的方法則是 bezierCurveTo(x1,y1,x2,y2,x3,y3)

其中參數 x一、y1，x二、y2 是控制點，x3 和 y3 是結束點 就是提供多一個控制點！

畫圖原理是這樣:

<img src="http://images.cnblogs.com/cnblogs_com/cnyball/1508697/o_051805136256233.gif"/>

這個例子就不寫了，你們照着二次貝塞爾曲線的例子，練習一下！

結束

本次講了：繪製圓形、繪製弧線、二次貝賽爾曲線、三次貝賽爾曲線，你們學會了多少呢？

好了，本次的教程就到這裏結束了，下次將爲你們帶來線條和文本的操做