微信小程序——向企业级用户介绍绘图API

#1 开始创作绝妙的路径

微信小程序自带canvas绘图接口，而beginPath方法则是在绘制过程中非常核心的部分之一。通过调用beginPath，开发者可以让canvas开始创建一个路径，为后续的填充和描边提供便利。

Tip:在使用beginPath时，相当于已经调用了一次该方法，无需重复，而被加入路径的所有形状会自动闭合。

#2 多样化的路径选择

在一个canvas里面，beginPath可以起到多重作用。比如，在同一个路径内可以使用多次setFillStyle和setStrokeStyle方法进行设置，实现不同颜色、粗细的路径绘制，最后以最后一次设置为准。

Tip:如果需要重新开始一个新的路径，在调用beginPath之后，只需再次绘制即可。

#3 举例说明

以下是一个演示beginPath方法使用的小例子：

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

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

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

在这个例子中，我们可以看到beginPath方法被用了两次。第一次在绘制黄色长方形之前，第二次是重新开始一个新的路径，并在其中添加三个不同的形状。最后以红色进行填充。