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