你我学习网
OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this)
创建离屏 canvas 实例
基础库 2.16.1 开始支持，低版本需做兼容处理。
小程序插件：支持，需要小程序基础库版本不低于 2.16.1
微信 Windows 版：支持
微信 Mac 版：支持
参数
object object
| 属性 | 类型 | 默认值 | 必填 | 说明 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| type | string | webgl | 否 | 创建的离屏 canvas 类型 | |||||||
|
|||||||||||
| width | number | 否 | 画布宽度 | ||||||||
| height | number | 否 | 画布高度 | ||||||||
| compInst | Component | 否 | 在自定义组件下，当前组件实例的 this | ||||||||
返回值
OffscreenCanvas
示例代码
// 创建离屏 2D canvas 实例
const canvas = wx.createOffscreenCanvas({type: '2d', width: 300, height: 150})
// 获取 context。注意这里必须要与创建时的 type 一致
const context = canvas.getContext('2d')
// 创建一个图片
const image = canvas.createImage()
// 等待图片加载
await new Promise(resolve => {
image.onload = resolve
image.src = IMAGE_URL // 要加载的图片 url
})
// 把图片画到离屏 canvas 上
context.clearRect(0, 0, 300, 150)
context.drawImage(image, 0, 0, 300, 150)
// 获取画完后的数据
const imgData = context.getImageData(0, 0, 300, 150)
离屏 Canvas 类型不可混用
由于 webgl canvas 和 2d canvas 的底层实现方式不同，因此必须要在调用 wx.createOffscreenCanvas 时提前指定类型。
指定类型后，离屏 canvas getContext(type) 调用不允许混用，如不能对 webgl canvas 调用 <code>getContext('2d')。
同样的，不同类型 canvas 调用 createImage 创建的图片对象也不支持混用，使用时请注意尽量使用 canvas 自身的 <code>createImage 创建图片对象。
与 MediaRecorder 结合
离屏 webgl canvas 支持作为参数传递给 wx.createMediaRecorder, 离屏 2d canvas 暂不支持。
旧版 createOffscreenCanvas
旧版函数签名为 wx.createOffscreenCanvas(width: number, height: number, this: object): OffscreenCanvas，从基础库 2.7.0 开始支持
从基础库 2.16.1 开始改为 wx.createOffscreenCanvas(options: object): OffscreenCanvas，向下兼容旧版入参。 但需注意旧版入参只能创建 webgl 类型，如需创建 2d 类型则必须使用新版。