位置：首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > HTML > 問(wèn)題詳情

HTML5 繪制曲線路徑 1.路徑

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-14

    關(guān)于繪制線條，還能提供很多有創(chuàng)意的方法?，F(xiàn)在應(yīng)該進(jìn)一步學(xué)習(xí)稍復(fù)雜點(diǎn)的圖形——路徑。 HTML5 canvas API中的路徑代表你希望呈現(xiàn)的任何形狀。前面繪制的對(duì)角線就是一條路徑，代碼中調(diào)用beginPath就說(shuō)明是要開(kāi)始繪制路徑了。實(shí)際上，路徑可以要多復(fù)雜有多復(fù)雜，如多條線、曲線段，甚至是子路徑。如果想在canvas上繪制任意形狀，那么需要重點(diǎn)關(guān)注路徑API。

    按照慣例，不論開(kāi)始繪制何種圖形，第一個(gè)需要調(diào)用的就是beginPath。這個(gè)簡(jiǎn)單的函數(shù)不帶任何參數(shù)，它用來(lái)通知canvas將要開(kāi)始繪制一個(gè)新的圖形了。對(duì)于canvas來(lái)說(shuō)，beginPath函數(shù)最大的用處是，canvas需要據(jù)此來(lái)計(jì)算圖形的內(nèi)部和外部范圍，以便完成后續(xù)的描邊和填充。

    路徑會(huì)跟蹤當(dāng)前坐標(biāo)，默認(rèn)值是原點(diǎn)。canvas本身也跟蹤當(dāng)前坐標(biāo)，不過(guò)可以通過(guò)繪制代碼來(lái)修改。

    調(diào)用了beginPath之后，就可以使用context的各種方法來(lái)繪制想要的形狀了。到目前為止，已經(jīng)用到了幾個(gè)簡(jiǎn)單的context路徑函數(shù);

    moveTo(x, y)：不繪制，只是將當(dāng)前位置移動(dòng)到新的目標(biāo)坐標(biāo)(x，y)。

    lineTo(x，y):不僅將當(dāng)前位置移動(dòng)到新的目標(biāo)坐標(biāo)(x,y)，而且在兩個(gè)坐標(biāo)之間畫一條直線。 

簡(jiǎn)而言之，上面兩個(gè)函數(shù)的區(qū)別在于：moveTo就像是提起畫筆，移動(dòng)到新位置，而lineTo告訴canvas用畫筆從紙上的舊坐標(biāo)畫條直線到新坐標(biāo)。不過(guò)，再次提醒一下，不管調(diào)用哪一個(gè)，都不會(huì)真正畫出圖形，因?yàn)檫€沒(méi)有調(diào)用stroke或者fill函數(shù)。目前，只是在定義路徑的位置，以便后面繪制時(shí)使用。

    下一個(gè)特殊的路徑函數(shù)叫做closePath。這個(gè)函數(shù)的行為同lineTo很像，唯一的差別在于，closePath會(huì)將路徑的起始坐標(biāo)自動(dòng)作為目標(biāo)坐標(biāo)。closePath還會(huì)通知canvas當(dāng)前繪制的圖形已經(jīng)閉合，或者形成了完全封閉的區(qū)域，這對(duì)將來(lái)的填充和描邊都非常有用。

    此時(shí)，可以在已有的路徑中繼續(xù)創(chuàng)建其他的子路徑，或者隨時(shí)調(diào)用beginPath重新繪制新路徑，并完全清除之前的所有路徑。

    跟了解所有復(fù)雜系統(tǒng)一樣，最好的方式還是實(shí)踐。現(xiàn)在，先不管那些線條的例子，使用HTML5 canvas API開(kāi)始創(chuàng)建一個(gè)新場(chǎng)景——帶有長(zhǎng)跑道的樹(shù)林。權(quán)且把這個(gè)圖案當(dāng)成是長(zhǎng)跑比賽的標(biāo)志吧。同其他的畫圖方式一樣，先從基本元素開(kāi)始。在這幅圖中，松樹(shù)的樹(shù)冠最簡(jiǎn)單。

【例題】繪制樹(shù)冠

代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>canvas路徑</title>

</head>

<body>

<canvas id="demo" width="300" height="300"></canvas>

</body>

<script>

function createCanopyPath(context) {

// 繪制樹(shù)冠

context.beginPath();

context.moveTo(-25,-50);

context.lineTo(-10,-80);

context.lineTo(-20,-80);

context.lineTo(-5,-110);

context.lineTo(-15,-110);

// 樹(shù)的頂點(diǎn)

context.lineTo(0,-140);

context.lineTo(15,-110);

context.lineTo(5,-110);

context.lineTo(20,-80);

context.lineTo(10,-80);

context.lineTo(25,-50);

// 連接起點(diǎn)，閉合路徑

context.closePath();

}

drawTrails();

function drawTrails() {

var canvas = document.getElementById(`demo`);

var context = canvas.getContext(`2d`);

context.save();

context.translate(130,250);

// 創(chuàng)建表現(xiàn)樹(shù)冠的路徑

createCanopyPath(context);

// 繪制當(dāng)前路徑

context.stroke();

context.restore();

}

</script>

</html>

image.png

從上面的代碼中可以看到，在JavaScript中用到的第一個(gè)函數(shù)仍然是前面用過(guò)的移動(dòng)和畫線命令，只不過(guò)調(diào)用次數(shù)多了一些。這些線條表現(xiàn)的是樹(shù)冠的輪廓，最后代碼閉合了路徑。我們?cè)谶@棵樹(shù)的底部留出了足夠的空間，后面將在這里的空白處畫上樹(shù)干。

這段代碼中調(diào)用的第二個(gè)函數(shù)想必大家已經(jīng)很熟悉了。先獲取canvas的上下文對(duì)象，保存以便后續(xù)使用，將當(dāng)前位置變換到新位置，畫樹(shù)冠，繪制到canvas上，最后恢復(fù)上下文的初始狀態(tài)。


繼續(xù)查找其他問(wèn)題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部