OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this)

基础库 2.16.1 开始支持,低版本需做兼容处理

Promise 风格 调用:不支持

小程序插件:支持,需要小程序基础库版本不低于 2.16.1

创建离屏 canvas 实例

参数

object object

属性 类型 默认值 必填 说明
type string webgl 创建的离屏 canvas 类型
width number 画布宽度
height number 画布高度
compInst Component 在自定义组件下,当前组件实例的 this

object.type 的合法值

说明 最低版本
webgl webgl类型上下文
2d 2d类型上下文

返回值

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 调用 getContext('2d')

同样的,不同类型 canvas 调用 createImage 创建的图片对象也不支持混用,使用时请注意尽量使用 canvas 自身的 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 类型则必须使用新版。