CanvasContext.beginPath

简介

CanvasContext.beginPath 是开始创建一个路径，需要调用 fill 或者 stroke 才会使用路径进行填充或描边。 在创建路径最开始时，相当于调用了一次 beginPath()，同一个路径内的多次 setFillStyle()、setStrokeStyle()、setLineWidth() 等设置，以最后一次设置为准。

扫码体验

效果示例

示例代码

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


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()

显示效果如下图所示：