全部产品

CanvasContext.beginPath

开始创建一个路径,需要调用 fill 或者 stroke 才会使用路径进行填充或描边。

在创建路径最开始时,相当于调用了一次 beginPath(),同一个路径内的多次 setFillStyle()setStrokeStyle()setLineWidth() 等设置,以最后一次设置为准。

示例代码

//.js
const ctx = my.createCanvasContext('awesomeCanvas')

ctx.rect(20, 20, 150, 50)
ctx.setFillStyle('blue')
ctx.fill();

ctx.beginPath();
ctx.rect(20, 50, 150, 40)

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

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

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

显示效果如下图所示:

image