uni.createCanvasContextAsync(options)
获取CanvasContext对象实例
uni.createCanvasContextAsync 方法可以异步获取页面上指定id的canvas组件的上下文对象CanvasContext。
因微信小程序获取CanvasContext只能异步,所以为了跨端,本API也被设计成了异步API,需要在回调中获取CanvasContext。
获取到CanvasContext对象后,还需通过getContext("2d")方法获取CanvasRenderingContext2D对象。
如果不考虑小程序,那么Web和App其实支持通过uni.getElementById方式同步获取UniCanvasElement。
参考文档:
createCanvasContextAsync 兼容性
Web | 微信小程序 | Android | iOS |
4.25 | 4.41 | 4.25 | 4.25 |
参数
名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
options | CreateCanvasContextAsyncOptions | 是 | - | - | - |
名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 | id | string.IDString | 是 | - |
Web
|
微信小程序
|
Android
|
iOS
| 4.25 | 4.41 | 4.25 | 4.25 |
| canvas 元素的 id 属性 | component | ComponentPublicInstance | 否 | - |
Web
|
微信小程序
|
Android
|
iOS
| 4.25 | 4.41 | 4.25 | 4.25 |
| 组件或页面实例,限定在什么范围内查找id | success | (context: CanvasContext) => void | 否 | - |
Web
|
微信小程序
|
Android
|
iOS
| 4.25 | 4.41 | 4.25 | 4.25 |
| 接口调用成功的回调函数 | fail | (error: UniError) => void | 否 | - |
Web
|
微信小程序
|
Android
|
iOS
| 4.25 | 4.41 | 4.25 | 4.25 |
| 接口调用失败的回调函数 | complete | () => void | 否 | - |
Web
|
微信小程序
|
Android
|
iOS
| 4.25 | 4.41 | 4.25 | 4.25 |
| 接口调用结束的回调函数(调用成功、失败都会执行) |
|
CanvasContext 的方法
getContext(type: '2d'): CanvasRenderingContext2D | null
getContext 兼容性
Web | 微信小程序 | Android | iOS |
- | - | - | - |
参数
名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
type | string | 是 | - | - | - |
返回值
toBlob(callback: CanvasContextToBlobCallback, type?: string, quality?: number): void
创造 Blob 对象
toBlob 兼容性
Web | 微信小程序 | Android | iOS |
4.25 | 4.41 | x | x |
参数
名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
callback | (blob: Blob) => void | 是 | - | - | - |
type | string | 否 | - | - | - |
quality | number | 否 | - | - | - |
toDataURL(): string
返回一个包含图片展示的 data URI
toDataURL 兼容性
Web | 微信小程序 | Android | iOS |
4.25 | 4.41 | 4.25 | 4.25 |
返回值
createImage(): Image
返回一个包含图片展示的 data URI
createImage 兼容性
Web | 微信小程序 | Android | iOS |
4.25 | 4.41 | 4.25 | 4.25 |
返回值
类型 | 描述 |
Image | 重复的图像源,支持代码包路径和本地临时路径 (本地路径) |
createPath2D(): Path2D
返回一个包含图片展示的 data URI
createPath2D 兼容性
Web | 微信小程序 | Android | iOS |
4.25 | 4.41 | 4.25 | 4.25 |
返回值
requestAnimationFrame(callback: RequestAnimationFrameCallback): number;
在下一次重绘之前,调用用户提供的回调函数
requestAnimationFrame 兼容性
Web | 微信小程序 | Android | iOS |
4.25 | 4.41 | 4.25 | 4.25 |
参数
名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
callback | (time: number) => void | 是 | - | - | - |
返回值
cancelAnimationFrame(taskId: number): void;
取消一个先前通过调用 uni.requestAnimationFrame() 方法添加到计划中的动画帧请求
cancelAnimationFrame 兼容性
Web | 微信小程序 | Android | iOS |
4.25 | 4.41 | 4.25 | 4.25 |
参数
名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
taskId | number | 是 | - | - | - |
参见
通用类型
GeneralCallbackResult
名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |
errMsg | string | 是 | - |
Web
|
微信小程序
|
Android
|
iOS
| - | 4.41 | - | - |
| 错误信息 |
注意事项
- CanvasContext的toDataURL方法在 App-Android 平台暂不支持在页面的onLoad和组件的onMount生命周期中调用