画布概要

最近更新时间:2023-11-10 15:39:25

我的收藏

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

该 方法 使用方式为 CanvasGradient.addColorStop(number stop, Color color)
功能说明:添加颜色的渐变点。小于最小 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 gradient
const 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 gradient
ctx.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

详情请见 canvasContext

OffscreenCanvas

详情请见 OffscreenCanvas

Path2D

详情请见 Path2D

Canvas

详情请见 Canvas

Color

详情请见 Color