CanvasContext.fill

簡(jiǎn)介

CanvasContext.fill 用于對(duì)當(dāng)前路徑中的內(nèi)容進(jìn)行填充。默認(rèn)的填充色為黑色。

使用限制

• 如果當(dāng)前路徑?jīng)]有閉合，fill() 方法會(huì)將起點(diǎn)和終點(diǎn)進(jìn)行連接，然后填充，詳情見(jiàn) 示例代碼 1。
• fill() 填充的的路徑從 beginPath() 開(kāi)始計(jì)算，但不包含 fillRect() ，詳情見(jiàn) 示例代碼 2。

掃碼體驗(yàn)

效果示例

示例代碼

示例代碼 1

//.js
const ctx = my.createCanvasContext('canvas')
ctx.moveTo(20, 20)
ctx.lineTo(200, 20)
ctx.lineTo(200, 200)
ctx.fill()
ctx.draw()

顯示效果如下圖所示：

示例代碼 2

//.js
const ctx = my.createCanvasContext('canvas')
ctx.rect(20, 20, 110, 40)
ctx.setFillStyle('blue')
ctx.fill()


ctx.beginPath()
ctx.rect(20, 30, 150, 40)


ctx.setFillStyle('yellow')
ctx.fillRect(20, 80, 150, 40)


ctx.rect(20, 150, 150, 40)


ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

顯示效果如下圖所示：