全部产品

CanvasContext.fill

对当前路径中的内容进行填充。默认的填充色为黑色。

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

示例代码

示例代码 1

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

显示效果如下图所示:

image

示例代码 2

//.js
const ctx = my.createCanvasContext('awesomeCanvas')
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()

显示效果如下图所示:

image