Html5 Canvas初探學習筆記(10) -複雜路徑

之前已經介紹過簡單的繪製路徑，本篇介紹繪製折線和貝塞爾曲線，首先介紹折線，效果如下：

程式碼如下：

context.beginPath();
context.moveTo(100,50);
//context.lineTo(100,50);
context.lineTo(150,150);
context.lineTo(50,150);
//context.closePath();
context.stroke();

之前介紹過moveTo後接起點的橫縱座標，我試了一下，第一個是 lineTo也可以，後面的lineTo就是從這個點到下一個點畫一條直線，然後再以這個點為起點，在調lineTo就是以上一個點為起點到這個點，如果把context.closePath();打開，那麼就會把目前的這個點和最早的一個起點連接，形成一個閉合三角形，效果如下：

下面看貝塞爾曲線：有兩個方法可以實現貝塞爾曲線：quadraticCurveTo和bezierCurveTo#，分別是二次貝塞爾曲線和三次貝塞爾曲線，差別就是二次貝塞爾曲線只有一個波峰，三次貝塞爾曲線既有波峰也有波谷，首先來看二次貝塞爾曲線，效果如下：

#

context.beginPath();
context.moveTo(50,250);
//context.lineTo(50,250);
context.quadraticCurveTo(150,100,250,250);
//context.closePath();
context.stroke();

首先是起點，也可以是moveTo 或lineTo

，然後呼叫

quadraticCurveTo

，前兩個參數是控制點座標，後兩個參數是終點橫縱座標，控制點的橫座標和「波峰」橫座標相同，波峰的縱座標和波峰縱座標有關，注意是有關，也就是縱座標越大波峰越高。如果開啟

context.closePath();

效果如下：

##下面來看三次貝塞爾曲線，首先來看效果：

##代碼如下：

context.beginPath();
context.moveTo(50,200);
//context.lineTo(50,250);
context.bezierCurveTo(100,100,150,300,200,200);
//context.closePath();
context.stroke();

bezierCurveTo

的三個參數分別是，第一或波個波峰或波谷的橫縱座標，第二個波峰或波谷的橫縱座標，終點的橫縱座標，同樣開啟######context.closePath();######也將曲線閉合，效果如下：##################### ############ 以上是Html5 Canvas初探學習筆記(10) -複雜路徑 的內容，更多相關內容請關注PHP中文網（www.php.cn）！ ################