HTML5- Canvas入門（三）

前兩章咱們掌握了線段、矩形和多邊形的繪製方法，今天咱們主要是學習如何繪製圓弧和貝塞爾曲線。

圓弧的繪製

圓弧能夠理解爲一個圓上的某部分線段，在canvas中，繪製一條圓弧的語法以下：

ctx.arc( 圓心x座標, 圓心y座標, 圓的半徑r , 開始角度, 結束角度 );

其中的 「開始角度」 和 「結束角度」 是相對360度的順時針的極座標而言的，可配合下圖理解：

咱們來一個例子，繪製一個圓心座標爲(80,80)，半徑爲40，開始角度爲30度，結束角度爲90度，那麼能夠這樣繪製：

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的瀏覽器不支持canvas，建議使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //獲取該canvas的2D繪圖環境對象
ctx.arc( 80, 80, 40, 1/6*Math.PI, 1/2*Math.PI);
ctx.stroke();  //描邊
</script>

其中開始角和結束角咱們分別設定爲「1/6*Math.PI」和「1/2*Math.PI」，是由於canvas裏的角度是以PI（π）爲單位的，在js中寫做Math.PI，你能夠把一個PI理解爲180度，那麼30度即是1/6個PI。上述代碼效果以下：

開始角和結束角也能夠是負值，則角度從0度開始以逆時針方式獲取：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //獲取該canvas的2D繪圖環境對象
ctx.arc( 80, 80, 40, -1/6*Math.PI, -1/2*Math.PI);
ctx.stroke();  //描邊

咱們能夠很輕鬆地來繪製一個完整的圓，將起始角設爲0度，結束角設爲360度（2*Math.PI）便可：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //獲取該canvas的2D繪圖環境對象
ctx.arc( 80, 80, 40, 0, 2*Math.PI);

ctx.lineWidth = 3;  //描邊寬度爲3px
ctx.strokeStyle = "yellow";
ctx.stroke();  //描邊
ctx.fillStyle = "#4DA6FF";
ctx.fill(); //填充顏色

注意給圓填充顏色咱們使用的是 .fill() 方法，和多邊形的填充方式同樣。

接着說說 arc() 的好兄弟 arcTo() 方法，它能夠在兩條線段之間鏈接起一條弧線，其語法以下

ctx.arcTo( 起點切線末端x座標, 起點切線末端y座標, 終點x座標, 終點y座標, 圓的半徑r );

能夠配合下圖理解：

咱們先無論什麼「鏈接兩條線段」的事情，單純看下arcTo()繪製了怎樣的一條圓弧：

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的瀏覽器不支持canvas，建議使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //獲取該canvas的2D繪圖環境對象
ctx.moveTo(20,20);           // 建立開始點
ctx.arcTo(60,20,60,60,40); // 建立圓弧路徑
ctx.stroke();                
</script>

效果以下：

那麼咱們利用arcTo()方法來鏈接兩條直線吧：

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的瀏覽器不支持canvas，建議使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //獲取該canvas的2D繪圖環境對象
ctx.moveTo(20,20);
ctx.lineTo(60,20);
ctx.arcTo(100,20,100,60,40); // 建立圓弧路徑
ctx.lineTo(100,100);
ctx.stroke();                
</script>

效果以下：

須要知道的是 arc() 不會影響畫筆的位置，而 arcTo() 會把畫筆移到圓弧線的終點位置。

曲線的繪製

不管是arc()抑或arcTo()，均是繪製了一個正圓上的部分圓弧線段，下面講講更靈活的曲線的繪製。

首先介紹的是canvas中貝塞爾曲線的繪製。使用過AI等專業矢量製圖軟件的朋友相信能很好地理解這一部分。咱們先看下在製圖軟件中用鋼筆工具繪製一條貝塞爾曲線的過程：

能夠看到每兩點能夠連成一條貝塞爾路徑，且每個點都有一條方位控制線來控制曲線的彎曲程度和走向，在canvas中也是以相似形式控制貝塞爾曲線的形狀。

咱們先來看看bezierCurveTo()的實現方式，它稱做「三次方貝塞爾曲線」，其語法爲：

ctx.bezierCurveTo( CSx, CSy, CEx, CEy, Ex, Ey );

其中CSx、CSy表示貝塞爾曲線起點方向控制線末端的x座標和y座標。CEx、CEy表示貝塞爾曲線終點方向控制線末端的x座標和y座標。Ex、Ey表示貝塞爾曲線終點座標。

參考圖以下，圖中的貝塞爾曲線起點座標爲（20,20），終點座標爲（200,20），起點的方向控制線末端座標爲（20,100），終點的方向控制線末端座標爲（200,100）：

有的朋友可能會問爲什麼bezierCurveTo()方法沒有起始點的參數，答案是起始點默認爲bezierCurveTo()方法執行以前畫筆所在的位置，咱們能夠經過ctx.moveTo(x,y)來肯定起始點的位置。

如上圖所示的貝塞爾曲線咱們能夠這樣繪製：

<canvas id="myCanvas" width="300" height="150" style="border:solid 1px #CCC;">
您的瀏覽器不支持canvas，建議使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //獲取該canvas的2D繪圖環境對象
ctx.moveTo(20,20);   //肯定起始點
ctx.bezierCurveTo( 20, 100, 200, 100, 200, 20 );
ctx.stroke();  //描邊
</script>

咱們能夠繪製兩條或者多條連在一塊兒的貝塞爾曲線，從而塑造咱們想要的曲線：

<canvas id="myCanvas" width="400" height="250" style="border:solid 1px #CCC;">
您的瀏覽器不支持canvas，建議使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //獲取該canvas的2D繪圖環境對象
ctx.moveTo(20,120);   //肯定起始點
ctx.bezierCurveTo( 20, 200, 200, 200, 200, 120 );   //繪製第一條貝塞爾曲線
ctx.bezierCurveTo( 200, 20, 380, 20, 380, 120 );  //繪製第二條貝塞爾曲線，該曲線起點爲上一條曲線終點（200，120）
ctx.stroke();  //描邊
</script>

效果以下：

使用過矢量製圖軟件的朋友可能有個地方會困惑，那就是咱們不少時候開始繪製一條曲線時（起點不作拉伸），該曲線的起點是沒有任何方向控制線的，以下圖：

若是咱們要繪製一條起點不作方向控制的曲線，那麼bezierCurveTo()方法就再也不適用了。

針對這種狀況，能夠經過 quadraticCurveTo() 方法來解決，它稱做「二次方貝塞爾曲線」，語法爲

ctx.quadraticCurveTo( CEx, CEy, Ex, Ey );

其中CEx、CEy表示曲線終點方向控制線末端的x座標和y座標。Ex、Ey表示曲線終點座標。至於曲線起點則跟bezierCurveTo()同樣，爲該方法執行前畫筆所在的位置。

咱們試着來繪製一條這樣的曲線，它是我在AI中用鋼筆工具繪製出來的：

它的矢量輪廓是這樣的：

因爲起點是沒有方向控制線的，咱們很容易知道得先繪製一條quadraticCurve，而後再緊接着繪製一條bezierCurve來完成這條曲線。

咱們先肯定下各點的座標：

而後輕鬆寫出代碼：

<canvas id="myCanvas" width="490" height="270" style="border:solid 1px #CCC;">
您的瀏覽器不支持canvas，建議使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //獲取該canvas的2D繪圖環境對象
ctx.moveTo(52,37);   //肯定起始點
ctx.quadraticCurveTo( 45, 175, 172, 157 );   //繪製第一條曲線
ctx.bezierCurveTo( 298, 140, 337, 201, 312, 236 );  //繪製第二條曲線
ctx.stroke();  //描邊
</script>

效果以下，槓槓的：

本章暫時寫到這裏，建議有興趣的朋友多實踐，其中貝塞爾曲線部分的知識點能夠經過AI等矢量設計軟件來加深理解。共勉~