作者： Next

RenderingContextCanvas.getContext(string contextType)

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

微信小程序插件：支持

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

功能描述

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

参数

string contextType

上下文类型

contextType 的合法值

值 说明 最低版本
2d 2d 绘图上下文
webgl webgl 绘图上下文
webgl2 webgl2 绘图上下文 2.24.0

返回值

RenderingContext

支持获取 2D 和 WebGL 绘图上下文

ImageCanvas.createImage()

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

微信小程序插件：支持

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

功能描述

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

返回值

Image

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)
  }
})