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