简体中文
简体中文
# 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 | HarmonyOS |
|---|---|---|---|---|
| 4.25 | 4.41 | 4.25 | 4.25 | 4.61 |
# 参数
| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| options | CreateCanvasContextAsyncOptions | 是 | - | - | |||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||
# CanvasContext 的方法
# getContext(type: '2d'): CanvasRenderingContext2D | null
# getContext 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS |
|---|---|---|---|---|
| - | - | - | - | - |
# 参数
| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| type | string | 是 | - | - |
# 返回值
| 类型 | 必备 |
|---|---|
| CanvasRenderingContext2D | 否 |
# toBlob(callback: CanvasContextToBlobCallback, type?: string, quality?: number): void
创造 Blob 对象
# toBlob 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS |
|---|---|---|---|---|
| 4.25 | 4.41 | x | x | - |
# 参数
| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| callback | (blob: Blob) => void | 是 | - | - | |
| type | string | 否 | - | - | |
| quality | number | 否 | - | - |
# toDataURL(): string
返回一个包含图片展示的 data URI
# toDataURL 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS |
|---|---|---|---|---|
| 4.25 | 4.41 | 4.25 | 4.25 | - |
# 返回值
| 类型 |
|---|
| string |
# createImage(): Image
返回一个包含图片展示的 data URI
# createImage 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS |
|---|---|---|---|---|
| 4.25 | 4.41 | 4.25 | 4.25 | - |
# 返回值
| 类型 | 描述 |
|---|---|
| Image | 重复的图像源，支持代码包路径和本地临时路径 (本地路径) |
# createPath2D(): Path2D
返回一个包含图片展示的 data URI
# createPath2D 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS |
|---|---|---|---|---|
| 4.25 | 4.41 | 4.25 | 4.25 | - |
# 返回值
| 类型 |
|---|
| Path2D |
# requestAnimationFrame(callback: RequestAnimationFrameCallback): number;
在下一次重绘之前，调用用户提供的回调函数
# requestAnimationFrame 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS |
|---|---|---|---|---|
| 4.25 | 4.41 | 4.25 | 4.25 | - |
# 参数
| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| callback | (time: number) => void | 是 | - | - |
# 返回值
| 类型 |
|---|
| number |
# cancelAnimationFrame(taskId: number): void;
取消一个先前通过调用 uni.requestAnimationFrame() 方法添加到计划中的动画帧请求
# cancelAnimationFrame 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS |
|---|---|---|---|---|
| 4.25 | 4.41 | 4.25 | 4.25 | - |
# 参数
| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| taskId | number | 是 | - | - |
# 参见
# 通用类型
# GeneralCallbackResult
| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| errMsg | string | 是 | - | 错误信息 |
# 注意事项
- CanvasContext的toDataURL方法在 App-Android 平台暂不支持在页面的onLoad和组件的onMount生命周期中调用
