HTML5 繪制曲線路徑 1.路徑

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

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

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

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

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

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

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

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

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

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

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

【例題】繪制樹冠

代碼如下:

<!DOCTYPE html>

<html>

<head>

<title>canvas路徑</title>

</head>

<body>

</body>

function createCanopyPath(context) {

// 繪制樹冠

context.beginPath();

context.moveTo(-25,-50);

context.lineTo(-10,-80);

context.lineTo(-20,-80);

context.lineTo(-5,-110);

context.lineTo(-15,-110);

// 樹的頂點(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)樹冠的路徑

createCanopyPath(context);

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

context.stroke();

context.restore();

}

</script>

</html>

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

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

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

相關(guān)視頻回答

回復(fù)(0)

點(diǎn)擊加載更多評論>>

HTML5 繪制曲線路徑 1.路徑

繼續(xù)查找其他問題的答案？

最近更新

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