绘制微信小程序：了解 draw 接口

在当前越来越多的企业开始关注小程序时，为了让您的小程序更加吸引人，一个强大的绘图模块是不可或缺的。在微信小程序 API 中，draw 接口就提供了丰富的绘图功能。

一、绘图接口和方法

canvasContext.draw() 可以将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

Tip: 绘图上下文需要由wx.createCanvasContext(canvasId)来创建。

二、参数

三、例子

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.draw()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()

以上代码将在画布 myCanvas 上显示一个红色矩形。因为先调用了一次 draw()，所以第一个矩形可以正常显示；而第二个矩形由于没有再次调用 draw()，所以无法显示。

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.draw()
ctx.fillRect(50, 50, 150, 100)
ctx.draw(true)

如果使用了 draw(true)，则会在第二个矩形绘制完成后立即清空画布并将两个矩形都显示出来。