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

本篇內(nèi)容介紹了“HTML5中怎么用Canvas繪制各種線條”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(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è)計，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

</script>

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

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

1. 直線

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

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

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

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

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

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

ctx.stroke();

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

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(); //關(guān)閉路徑

3. 弧線

弧線就是從以A點為圓心，半徑為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)換可以用這個表達式：var radians =

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

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

ctx.stroke();

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

4. 曲線

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

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

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

示例代碼如下：

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()做出會話氣泡圖形的案例，其代碼如下：

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

bezierCurveTo()方法比前面的quadraticCurveTo()方法多出了一個控制點，因此，表現(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)上還有一個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)的。因為不像在矢量繪圖軟件Adobe Illustrator 里那樣有即時的視覺反饋，所以用它來畫復(fù)雜圖形比較麻煩。但是從理論上來說，任何復(fù)雜的圖形都可以用貝塞爾曲線繪制出來。

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

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

本文題目：HTML5中怎么用Canvas繪制各種線條
網(wǎng)頁地址：http://muchs.cn/article42/pipdec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站收錄、靜態(tài)網(wǎng)站、定制網(wǎng)站、Google、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容