CanvasContext.fill

简介

CanvasContext.fill 用于对当前路径中的内容进行填充。默认的填充色为黑色。

使用限制

• 如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充，详情见 示例代码 1。
• fill() 填充的的路径从 beginPath() 开始计算，但不包含 fillRect() ，详情见 示例代码 2。

扫码体验

效果示例

示例代码

示例代码 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()

显示效果如下图所示：