uni.createCanvasContextAsync(options)

获取CanvasContext对象实例

uni.createCanvasContextAsync 方法可以异步获取页面上指定id的canvas组件的上下文对象CanvasContext。

因微信小程序获取CanvasContext只能异步，所以为了跨端，本API也被设计成了异步API，需要在回调中获取CanvasContext。

获取到CanvasContext对象后，还需通过getContext("2d")方法获取CanvasRenderingContext2D对象。

如果不考虑小程序，那么Web和App其实支持通过uni.getElementById方式同步获取UniCanvasElement。

参考文档：

• canvas组件文档
• CanvasRenderingContext2D文档

createCanvasContextAsync 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.25	4.41	4.25	4.25	4.61

参数

名称	类型	必填	默认值	兼容性	描述
options	CreateCanvasContextAsyncOptions	是
名称 类型 必备 默认值 兼容性 描述 id string.IDString 是 canvas 元素的 id 属性 component ComponentPublicInstance 否 组件或页面实例，限定在什么范围内查找id success (context: CanvasContext) => void 否 接口调用成功的回调函数 fail (error: UniError) => void 否 接口调用失败的回调函数 complete () => void 否 接口调用结束的回调函数（调用成功、失败都会执行）

CanvasContext 的方法

getContext(type: '2d'): CanvasRenderingContext2D | null

getContext

参数

名称	类型	必填	默认值	兼容性	描述
type	string	是

返回值

类型	描述	必备
CanvasRenderingContext2D	canvas元素的绘图2D渲染上下文, 它用于绘制形状、文本、图像和其他对象	否

toBlob(callback: CanvasContextToBlobCallback, type?: string, quality?: number): void

toBlob 创造 Blob 对象

toBlob 兼容性

Web	微信小程序	Android	iOS
4.25	4.41	x	x

参数

名称	类型	必填	默认值	兼容性	描述
callback	(blob: Blob) => void	是
type	string	否
quality	number	否

toDataURL(): string

toDataURL 返回一个包含图片展示的 data URI

toDataURL 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.25	4.41	4.25	4.25	4.61

返回值

类型
string

createImage(): Image

createImage 返回一个包含图片展示的 data URI

createImage 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.25	4.41	4.25	4.25	4.61

返回值

类型	描述
Image	重复的图像源，支持代码包路径和本地临时路径 (本地路径)

createPath2D(): Path2D

createPath2D 返回一个包含图片展示的 data URI

createPath2D 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.25	4.41	4.25	4.25	4.61

返回值

类型
Path2D

requestAnimationFrame(callback: RequestAnimationFrameCallback): number;

requestAnimationFrame 在下一次重绘之前，调用用户提供的回调函数

requestAnimationFrame 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.25	4.41	4.25	4.25	4.61

参数

名称	类型	必填	默认值	兼容性	描述
callback	(time: number) => void	是

返回值

类型
number

cancelAnimationFrame(taskId: number): void;

cancelAnimationFrame 取消一个先前通过调用 uni.requestAnimationFrame() 方法添加到计划中的动画帧请求

cancelAnimationFrame 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.25	4.41	4.25	4.25	4.61

参数

名称	类型	必填	默认值	兼容性	描述
taskId	number	是

参见

• 相关 Bug

通用类型

GeneralCallbackResult

名称	类型	必备	默认值	兼容性	描述
errMsg	string	是			错误信息

注意事项

• CanvasContext的toDataURL方法在 App-Android 平台暂不支持在页面的onLoad和组件的onMount生命周期中调用