分类： 画布

Canvas

基础库 2.7.0 开始支持，低版本需做兼容处理。

相关文档: 画布指南、canvas 组件介绍

Canvas 实例，可通过 SelectorQuery 获取。

属性

number width

画布宽度

number height

画布高度

方法

RenderingContext Canvas.getContext(string contextType)

该方法返回 Canvas 的绘图上下文

Image Canvas.createImage()

创建一个图片对象。 支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

ImageData Canvas.createImageData()

创建一个 ImageData 对象。仅支持在 2D Canvas 中使用。

Path2D Canvas.createPath2D(Path2D path)

创建 Path2D 对象

number Canvas.requestAnimationFrame(function callback)

在下次进行重绘时执行。 支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

Canvas.cancelAnimationFrame(number requestID)

取消由 requestAnimationFrame 添加到计划中的动画帧请求。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

string Canvas.toDataURL(string type, number encoderOptions)

返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。

示例代码

2D Canvas 示例 在开发者工具中预览效果

WebGL 示例 在开发者工具中预览效果

wx.canvasGetImageData(Object object, Object this)

基础库 1.9.0 开始支持，低版本需做兼容处理。

以 Promise 风格 调用：支持

微信小程序插件：支持，需要微信小程序基础库版本不低于 1.9.6

微信 鸿蒙 OS 版：支持

相关文档: 画布指南、canvas 组件介绍

功能描述

获取 canvas 区域隐含的像素数据。

参数

Object object

属性 类型 默认值 必填 说明
canvasId string 是 画布标识，传入 canvas 组件的 canvas-id 属性。
x number 是 将要被提取的图像数据矩形区域的左上角横坐标
y number 是 将要被提取的图像数据矩形区域的左上角纵坐标
width number 是 将要被提取的图像数据矩形区域的宽度
height number 是 将要被提取的图像数据矩形区域的高度
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数
Object res
属性 类型 说明
width number 图像数据矩形的宽度
height number 图像数据矩形的高度
data Uint8ClampedArray 图像像素点数据，一维数组，每四项表示一个像素点的 rgba

Object this

在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件

示例代码

在开发者工具中预览效果

wx.canvasGetImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  success(res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
  }
})

微信小程序 wx.canvasPutImageData

基础库 1.9.0 开始支持，低版本需做兼容处理。

以 Promise 风格 调用：支持

微信小程序插件：支持，需要微信小程序基础库版本不低于 1.9.6

微信 鸿蒙 OS 版：支持

相关文档: 画布指南、canvas 组件介绍

功能描述

将像素数据绘制到画布。在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内 <canvas> 组件

参数

Object object

属性 类型 默认值 必填 说明
canvasId string 是 画布标识，传入 canvas 组件的 canvas-id 属性。
data Uint8ClampedArray 是 图像像素点数据，一维数组，每四项表示一个像素点的 rgba
x number 是 源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）
y number 是 源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）
width number 是 源图像数据矩形区域的宽度
height number 是 源图像数据矩形区域的高度
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

Object this

在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件

示例代码


const data = new Uint8ClampedArray([255, 0, 0, 1])
wx.canvasPutImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 1,
  height: 1,
  data: data,
  success (res) {}
})

wx.canvasToTempFilePath(Object object, Object this)

以 Promise 风格 调用：支持

微信小程序插件：支持，需要微信小程序基础库版本不低于 1.9.6

微信 Windows 版：支持

微信 Mac 版：支持

微信 鸿蒙 OS 版：支持

相关文档: 画布指南、canvas 组件介绍

功能描述

把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。

参数

Object object

属性 类型 默认值 必填 说明 最低版本
x number 0 否 指定的画布区域的左上角横坐标 1.2.0
y number 0 否 指定的画布区域的左上角纵坐标 1.2.0
width number canvas宽度-x 否 指定的画布区域的宽度 1.2.0
height number canvas高度-y 否 指定的画布区域的高度 1.2.0
destWidth number width*屏幕像素密度 否 输出的图片的宽度 1.2.0
destHeight number height*屏幕像素密度 否 输出的图片的高度 1.2.0
canvasId string 否 画布标识，传入 canvas 组件的 canvas-id
canvas Object 否 画布标识，传入 canvas 组件实例 （canvas type=”2d” 时使用该属性）。
fileType string png 否 目标文件的类型 1.7.0
合法值 说明
jpg jpg 图片
png png 图片
quality number 否 图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。 1.7.0
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数
Object res
属性 类型 说明
tempFilePath string 生成文件的临时路径 (本地路径)

Object this

在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件

示例代码


wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath)
  }
})

CanvasContext wx.createCanvasContext(string canvasId, Object this)

从基础库 2.9.0 开始，本接口停止维护，请使用 Canvas 代替

微信小程序插件：支持，需要微信小程序基础库版本不低于 1.9.6

微信 Windows 版：支持

微信 Mac 版：支持

微信 鸿蒙 OS 版：支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

创建 canvas 的绘图上下文 CanvasContext 对象

参数

string canvasId

要获取上下文的 canvas 组件 canvas-id 属性

Object this

在自定义组件下，当前组件实例的this，表示在这个自定义组件下查找拥有 canvas-id 的 canvas ，如果省略则不在任何自定义组件内查找

返回值

CanvasContext

OffscreenCanvaswx.createOffscreenCanvas(object object, number width, number height, Object this)

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

微信小程序插件：支持，需要微信小程序基础库版本不低于 2.16.1

微信 Windows 版：支持

微信 Mac 版：支持

微信 鸿蒙 OS 版：支持

相关文档: 画布指南、canvas 组件介绍

功能描述

创建离屏 canvas 实例

参数

object object

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

number width

画布宽度

number height

画布高度

Object this

在自定义组件下，当前组件实例的 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 调用 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 类型则必须使用新版。