2023年微信小程序API 繪圖beginPath（開始一個(gè)路徑）

微信小程序——向企業(yè)級(jí)用戶介紹繪圖API

#1 開始創(chuàng)作絕妙的路徑

微信小程序自帶canvas繪圖接口，而beginPath方法則是在繪制過(guò)程中非常核心的部分之一。通過(guò)調(diào)用beginPath，開發(fā)者可以讓canvas開始創(chuàng)建一個(gè)路徑，為后續(xù)的填充和描邊提供便利。

Tip:在使用beginPath時(shí)，相當(dāng)于已經(jīng)調(diào)用了一次該方法，無(wú)需重復(fù)，而被加入路徑的所有形狀會(huì)自動(dòng)閉合。

#2 多樣化的路徑選擇

在一個(gè)canvas里面，beginPath可以起到多重作用。比如，在同一個(gè)路徑內(nèi)可以使用多次setFillStyle和setStrokeStyle方法進(jìn)行設(shè)置，實(shí)現(xiàn)不同顏色、粗細(xì)的路徑繪制，最后以最后一次設(shè)置為準(zhǔn)。

Tip:如果需要重新開始一個(gè)新的路徑，在調(diào)用beginPath之后，只需再次繪制即可。

#3 舉例說(shuō)明

以下是一個(gè)演示beginPath方法使用的小例子：

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

// 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è)例子中，我們可以看到beginPath方法被用了兩次。第一次在繪制黃色長(zhǎng)方形之前，第二次是重新開始一個(gè)新的路徑，并在其中添加三個(gè)不同的形狀。最后以紅色進(jìn)行填充。

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