2023年微信小程序API 繪圖closePath（關(guān)閉一個(gè)路徑）

使用微信小程序的繪圖API可以實(shí)現(xiàn)各種復(fù)雜的圖形和動(dòng)畫效果。其中，canvasContext.closePath()是一個(gè)非常重要的方法，下面將對(duì)其進(jìn)行詳細(xì)介紹。

1. 關(guān)閉路徑可以連接起點(diǎn)和終點(diǎn)

當(dāng)我們使用moveTo()創(chuàng)建繪圖路徑時(shí)，需要用lineTo()等方法來(lái)連接各個(gè)點(diǎn)。最后調(diào)用closePath()方法，即可自動(dòng)連接起點(diǎn)和終點(diǎn)。這樣一來(lái)，我們就不用費(fèi)神去算出終點(diǎn)的坐標(biāo)了。此外，在繪制復(fù)雜的圖形時(shí)，通過關(guān)閉路徑，也可以更方便地控制每個(gè)子路徑的起始和結(jié)束位置。

2. 關(guān)閉路徑之后需要及時(shí)調(diào)用fill或stroke方法

在調(diào)用closePath()方法之后，必須及時(shí)調(diào)用fill()或者stroke()方法才能生效。如果沒有及時(shí)調(diào)用，之前的路徑將不會(huì)被渲染。這點(diǎn)需要特別注意，否則可能導(dǎo)致繪圖出現(xiàn)意想不到的錯(cuò)誤。

3. 路徑可以分開繪制，但需要注意順序

閉合路徑并不是必須的，如果想要分開繪制幾個(gè)路徑，可以在繪制一個(gè)路徑之后調(diào)用closePath()方法，再開始繪制下一個(gè)路徑。但要注意順序，否則可能會(huì)出現(xiàn)重疊的情況。例如，在上一個(gè)路徑?jīng)]有填充或描邊的時(shí)候，不能開啟下一個(gè)路徑。

4. 示例

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()

以上代碼創(chuàng)建了一個(gè)三角形，并使用closePath()將起點(diǎn)和終點(diǎn)相連，最后調(diào)用stroke()方法描邊并渲染出來(lái)。

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.closePath()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

以上代碼分別繪制了三個(gè)矩形。第一個(gè)矩形使用rect()方法創(chuàng)建路徑并關(guān)閉，不需要填充或描邊。接著使用beginPath()創(chuàng)建新的路徑，繪制第二個(gè)矩形并通過setFillStyle()方法設(shè)置填充色。調(diào)用fillRect()方法渲染出來(lái)。最后，又繪制了一個(gè)矩形，并調(diào)用fill()方法填充整個(gè)路徑。

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)標(biāo)明：himall原創(chuàng)>