本篇內(nèi)容介紹了“HTML5中怎么用Canvas繪制各種線條”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)建站專注于益陽企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站建設(shè)。益陽網(wǎng)站建設(shè)公司,為益陽等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

本文介紹的所有內(nèi)容都假定已經(jīng)獲得了Canvas對(duì)象，即假定已經(jīng)在頁面中含有下列代碼：

在本節(jié)中，將重點(diǎn)使用path()、fill()和stroke()方法及其相關(guān)屬性。

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

1. 直線

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

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

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

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

ctx.moveTo(10, 10); //給路徑一個(gè)起點(diǎn)

ctx.lineTo(100, 100); //給路徑一個(gè)終點(diǎn)

ctx.stroke();

ctx.closePath(); //關(guān)閉路徑

2. 折線

折線就是從A點(diǎn)到B點(diǎn)再到C點(diǎn)的一個(gè)線段。繪制折線的示例代碼如下：

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

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

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

ctx.moveTo(10, 10); //給路徑一個(gè)起點(diǎn)

ctx.lineTo(400, 400); //給路徑一個(gè)終點(diǎn)

ctx.moveTo(400, 400); //繼承上一個(gè)起點(diǎn)

ctx.lineTo(200, 300); //再給路徑一個(gè)終點(diǎn)

ctx.stroke();

ctx.closePath(); //關(guān)閉路徑

3. 弧線

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

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

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

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

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

//arc方法里用到的角度是以弧度為單位而不是度，度和弧度直接的轉(zhuǎn)換可以用這個(gè)表達(dá)式：var radians =

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

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

ctx.stroke();

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

4. 曲線

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

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

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

示例代碼如下：

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()是二次方曲線獲取方法，其詳細(xì)的工作示意圖如下：

示例代碼如下：

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(100,100);

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

ctx.stroke();

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

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）是數(shù)值分析和計(jì)算機(jī)圖形學(xué)中相當(dāng)重要的參數(shù)曲線。更高維度的貝塞爾曲線被稱作貝塞爾曲面。

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

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

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

ctx.lineWidth=2;

ctx.strokeStyle = "#F00";

ctx.moveTo(50,150);

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

ctx.stroke();

執(zhí)行

在網(wǎng)上還有一個(gè)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();

使用二次方和三次方貝塞爾曲線是相當(dāng)有挑戰(zhàn)的。因?yàn)椴幌裨谑噶坷L圖軟件Adobe Illustrator 里那樣有即時(shí)的視覺反饋，所以用它來畫復(fù)雜圖形比較麻煩。但是從理論上來說，任何復(fù)雜的圖形都可以用貝塞爾曲線繪制出來。

注意 二次方轉(zhuǎn)三次方是可能的，但是反之則不一定能行，僅當(dāng)三次方程中的三次項(xiàng)為零時(shí)才可能轉(zhuǎn)換為二次方貝塞爾曲線。通?？梢杂枚鄺l二次方曲線通過細(xì)分算法來近似模擬三次方貝塞爾曲線。

“HTML5中怎么用Canvas繪制各種線條”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！