createOffscreenCanvas
该 API 使用方法为 OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this)
功能说明：创建离屏 canvas 实例。
参数及说明：
number width：画布宽度。
number height：画布高度。
object object
属性 | 类型 | 默认值 | 必填 | 说明 |
type | string | webgl | 否 | 创建的离屏 canvas 类型 |
width | number | | 否 | 画布宽度 |
height | number | | 否 | 画布高度 |
compInst | Component | | 否 | 在自定义组件下，当前组件实例的 this |
createCanvasContext
该 API 使用方法为 CanvasContext wx.createCanvasContext(string canvasId, Object this)
功能说明：创建 canvas 的绘图上下文 canvasContext 对象。
参数及说明：
string canvasId：要获取上下文的
<canvas>组件 canvas-id 属性。Object this：在自定义组件下，当前组件实例的 this，表示在这自定义组件下查找拥有 canvas-id 的
<canvas>，如果省略，则不在任何自定义组件内查找。返回值：canvasContext。
canvasToTempFilePath
该 API 使用方法为 wx.canvasToTempFilePath(Object object, Object this)
功能说明：把当前画布指定区域的内容导出，生成指定大小的图片，在
draw() 回调里调用该方法才能保证图片导出成功。参数及说明：Object object。
属性 | 类型 | 默认值 | 必填 | 说明 |
x | number | 0 | 否 | 指定的画布区域的左上角横坐标 |
y | number | 0 | 否 | 指定的画布区域的左上角纵坐标 |
width | number | canvas宽度-x | 否 | 指定的画布区域的宽度 |
height | number | canvas高度-y | 否 | 指定的画布区域的高度 |
destWidth | number | width*屏幕像素密度 | 否 | 输出的图片的宽度 |
destHeight | number | height*屏幕像素密度 | 否 | 输出的图片的高度 |
canvasId | string | - | 是 | 画布标识，传入 <canvas> 组件的 canvas-id |
fileType | string | png | 否 | 目标文件的类型 |
quality | number | - | 是 | 图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作1.0 处理。 |
success | function | - | 否 | 接口调用成功的回调函数 |
fail | function | - | 否 | 接口调用失败的回调函数 |
complete | function | - | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.fileType 的合法值
值 | 说明 |
jpg | jpg 图片 |
png | png 图片 |
canvasPutImageData
该 API 使用方法为 wx.canvasPutImageData(Object object, Object this)
功能说明：将像素数据绘制到画布，在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内
canvas组件。参数1：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 | - | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
参数2：Object this，在自定义组件下，当前组件实例的 this，以操作组件内
<canvas>组件。示例代码：
const data = new Uint8ClampedArray([255, 0, 0, 1])wx.canvasPutImageData({canvasId: 'myCanvas',x: 0,y: 0,width: 1,data,success(res) {}})
canvasGetImageData
该 API 使用方法为 wx.canvasGetImageData(Object object, Object this)
功能说明：获取 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.success 回调函数参数：Object this，在自定义组件下，当前组件实例的 this，以操作组件内
<canvas>组件。示例代码：
wx.canvasGetImageData({canvasId: 'myCanvas',x: 0,y: 0,width: 100,
Image
功能说明：图片对象。
参数及说明
属性 | 类型 | 说明 |
src | string | 图片的 URL |
width | number | 图片的真实宽度 |
height | number | 图片的真实高度 |
referrerPolicy | string | origin：发送完整的referrer；no-referrer：不发送。格式固定为
https://servicewechat.com/{appid}/{version}/page-frame.html
，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本； |
onload | function | 图片加载完成后触发的回调函数 |
onerror | function | 图片加载发生错误后触发的回调函数 |
ImageData
功能说明：ImageData 对象。
参数及说明
属性 | 类型 | 说明 |
width | number | 使用像素描述 ImageData 的实际宽度 |
height | number | 使用像素描述 ImageData 的实际高度 |
data | Uint8ClampedArray | 一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示 |
canvasGradient
功能说明：渐变对象。
.addColorStop
功能说明：添加颜色的渐变点。小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染，相当于CanvasGradient.addColorStop(number stop, Color color)。
参数1：number stop，表示渐变中开始与结束之间的位置，范围0-1。
参数2：Color color，渐变点的颜色。
示例代码：
const ctx = wx.createCanvasContext('myCanvas')// Create circular gradientconst grd = ctx.createLinearGradient(30, 10, 120, 10)grd.addColorStop(0, 'red')grd.addColorStop(0.16, 'orange')grd.addColorStop(0.33, 'yellow')grd.addColorStop(0.5, 'green')grd.addColorStop(0.66, 'cyan')grd.addColorStop(0.83, 'blue')grd.addColorStop(1, 'purple')// Fill with gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()
RenderingContext
功能说明：Canvas 绘图上下文。
通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，实现了 HTML Canvas 2D Context 定义的属性、方法。
通过 Canvas.getContext('webgl') 或 OffscreenCanvas.getContext('webgl') 接口可以获取 WebGLRenderingContext 对象，实现了 WebGL 1.0 定义的所有属性、方法、常量。
CanvasRenderingContext2D 的 drawImage 方法 2.10.0 起支持传入通过 SelectorQuery 获取的 video 对象，2.29.0 起支持传入开启了自定义渲染的 LivePusherContext 对象。
CanvasContext
OffscreenCanvas
Path2D
Canvas
Color
是
否
本页内容是否解决了您的问题？