HTML5中怎么用Canvas繪制各種線條

本篇內容介紹了“HTML5中怎么用Canvas繪制各種線條”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

本文介紹的所有內容都假定已經獲得了Canvas對象，即假定已經在頁面中含有下列代碼：

<canvas id="mycanvas" width="500" height="500" style="border:1px #000 solid;"></canvas>

<script type="text/javascript">

var mycanvas = document.getElementById("mycanvas");

var ctx = mycanvas.getContext('2d');

</script>

在本節中，將重點使用path()、fill()和stroke()方法及其相關屬性。

本文將詳細介紹如何用canvas繪制各類線條，即直線、折線、弧線和曲線等，并提供相應的代碼作為參考。

1. 直線

直線就是從A點到B點的一條線段。繪制直線的示例代碼如下：

ctx.strokeStyle ="FF0000"; //線的顏色為紅色

ctx.lineWidth=2; //線寬為2像素

ctx.beginPath(); //開始路徑

ctx.moveTo(10, 10); //給路徑一個起點

ctx.lineTo(100, 100); //給路徑一個終點

ctx.stroke();

ctx.closePath(); //關閉路徑

2. 折線

折線就是從A點到B點再到C點的一個線段。繪制折線的示例代碼如下：

ctx.strokeStyle ="FF0000"; //線的顏色為紅色

ctx.lineWidth=2; //線寬為2像素

ctx.beginPath(); //開始路徑

ctx.moveTo(10, 10); //給路徑一個起點

ctx.lineTo(400, 400); //給路徑一個終點

ctx.moveTo(400, 400); //繼承上一個起點

ctx.lineTo(200, 300); //再給路徑一個終點

ctx.stroke();

ctx.closePath(); //關閉路徑

3. 弧線

弧線就是從以A點為圓心，半徑為B，角為C度的一段圓弧。繪制弧線的示例代碼如下：

ctx.strokeStyle ="FF0000"; //線的顏色為紅色

ctx.lineWidth=2; //線寬為2像素

ctx.arc(200,200,100,0,Math.PI*(1/2),false);

//繪制一條90&deg;的弧線，Math.PI等于180&deg;半圓周

//arc方法里用到的角度是以弧度為單位而不是度，度和弧度直接的轉換可以用這個表達式：var radians =

//(Math.PI/180)*degrees。

//參數說明(x,y,半徑, 起始角度,結束角度,是否為逆時針方向顯示)，其中(x,y)是圓心坐標

ctx.stroke();

注意 上面代碼中的arc方法的詳細工作示意圖如下圖：

4. 曲線

曲線是一種復雜的弧線組合，涉及3種方法，即arcTo()、quadraticCurveTo()、bezier-CurveTo()。

本節只講arcTo()，quadraticCurveTo()和bezierCurveTo()。

arcTo()方法用于畫一條與兩條射線相切的圓弧，其中一條射線穿過渲染上下文繪制起點，終點為 (x1, y1)；另一條射線穿過 (x2, y2)，終點為 (x1, y1)，這條圓弧為與這兩條射線相切的最小的圓弧。在調用完arcTo()方法后，將圓弧與射線 (x1, y1) (x2, y2) 的切點添加到當前路徑中，作為下次繪制的起點。

示例代碼如下：

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(10, 10);

ctx.arcTo(210, 60, 10, 210, 30);

ctx.stroke();

//上面的代碼給出曲線，為了更好地輔助讀者理解arcto()方法，特繪出兩條射線的夾角

ctx.beginPath();

ctx.strokeStyle = "#000";

ctx.moveTo(10, 6);

ctx.lineTo(214, 60);

ctx.lineTo(10, 214);

ctx.stroke();

5. 二次方曲線

quadraticCurveTo()是二次方曲線獲取方法，其詳細的工作示意圖如下：

示例代碼如下：

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(100,100);

ctx.quadraticCurveTo(125,225,225,166);

ctx.stroke();

在網上有人甚至給出了用quadraticCurveTo()做出會話氣泡圖形的案例，其代碼如下：

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(75,25);

ctx.quadraticCurveTo(25,25,25,62.5);

ctx.quadraticCurveTo(25,100,50,100);

ctx.quadraticCurveTo(50,120,30,125);

ctx.quadraticCurveTo(60,120,65,100);

ctx.quadraticCurveTo(125,100,125,62.5);

ctx.quadraticCurveTo(125,25,75,25);

ctx.stroke();

6. 貝塞爾曲線

貝塞爾曲線（Bezier curve）是數值分析和計算機圖形學中相當重要的參數曲線。更高維度的貝塞爾曲線被稱作貝塞爾曲面。

bezierCurveTo()方法比前面的quadraticCurveTo()方法多出了一個控制點，因此，表現更加豐富。

bezierCurveTo()方法的工作示意圖如下圖所示：

畫一條貝塞爾曲線的具體代碼如下：

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(50,150);

ctx.bezierCurveTo(150,50,250,150,350,50);

ctx.stroke();

執行

在網上還有一個bezierCurveTo()的制作心形案例，此處也一并提供給大家參考：

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(75,40);

ctx.bezierCurveTo(75,37,70,25,50,25);

ctx.bezierCurveTo(20,25,20,62.5,20,62.5);

ctx.bezierCurveTo(20,80,40,102,75,120);

ctx.bezierCurveTo(110,102,130,80,130,62.5);

ctx.bezierCurveTo(130,62.5,130,25,100,25);

ctx.bezierCurveTo(85,25,75,37,75,40);

ctx.stroke();

使用二次方和三次方貝塞爾曲線是相當有挑戰的。因為不像在矢量繪圖軟件Adobe Illustrator 里那樣有即時的視覺反饋，所以用它來畫復雜圖形比較麻煩。但是從理論上來說，任何復雜的圖形都可以用貝塞爾曲線繪制出來。

注意 二次方轉三次方是可能的，但是反之則不一定能行，僅當三次方程中的三次項為零時才可能轉換為二次方貝塞爾曲線。通常可以用多條二次方曲線通過細分算法來近似模擬三次方貝塞爾曲線。

“HTML5中怎么用Canvas繪制各種線條”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！