2023年微信小程序API 绘图·draw（进行绘图）
作者: --时间: 2022-09-29
阅读量：
绘制微信小程序：了解 draw 接口
在当前越来越多的企业开始关注小程序时，为了让您的小程序更加吸引人，一个强大的绘图模块是不可或缺的。在微信小程序 API 中，draw 接口就提供了丰富的绘图功能。
一、绘图接口和方法
canvasContext.draw() 可以将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
Tip: 绘图上下文需要由wx.createCanvasContext(canvasId)来创建。
二、参数
| 参数 | 类型 | 说明 | 最低版本 |
|---|---|---|---|
| reserve | Boolean | 非必填。本次绘制是否接着上一次绘制，即 reserve 参数为 false，则在本次调用 drawCanvas 绘制之前 native 层应先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。 | |
| callback | Function | 绘制完成后回调。 | 1.7.0 |
三、例子
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)，则会在第二个矩形绘制完成后立即清空画布并将两个矩形都显示出来。
