微信小程序API 绘图fill（对当前路径进行填充）

1. 介绍

随着互联网时代的不断发展，移动互联网已经成为了企业必备的工具。而微信小程序因其可以提高企业用户黏度及便利性等特点，正在受到越来越多企业的关注和使用。其中，绘图接口和方法是微信小程序的重要功能之一。

2. fill 绘图方法是什么

微信小程序中的canvasContext.fill()是一个绘图方法，它可以对当前路径进行填充。同时，默认的填充色为黑色。

2.1 fill() 方法的定义

当需要将路径中的内容进行填充的时候，可以使用 fill() 方法。如果当前路径没有闭合，此方法会将起点和终点进行连接，然后填充路径，例如例子一。

2.2 fill() 的使用示例

下面是一个简单的代码示例，演示如何创建一个路径并使用 fill() 方法填充:

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.fill()
ctx.draw()

上面的示例代码中，我们创建了一个路径，并沿着该路径绘制了一条直线。然后使用fill()方法对当前路径进行填充，最后展示出来。

2.3 fill() 方法的其他相关知识

需要注意的是，fill() 填充的路径是从 beginPath() 开始计算的，并且不会将 fillRect() 包含在内。如果有多个路径，只会填充最后一个路径。下面这段代码演示了 fill() 的其他用法：

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

上面的代码中，我们创建了三个矩形路径，当第一个矩形的填充样式被设定为 "yellow" 后，我们还添加了一个新的路径画出蓝色矩形。 只有当前路径才能被 fill() 方法填充（也就是第三个红色路径，黄色和蓝色不会被填充）。

3. 总结

通过使用微信小程序API中的绘图fill，您可以使用小程序进行自由绘图并实现各种各样的效果。希望这篇文章对您的小程序开发有所帮助！