智能客服
你问我答，随时在线为你解决问题
从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
高级筛选
API version全部版本
ArkTS API参考
Archived
Native API参考
Archived
您当前浏览的3.1/4.0版本文档归档不再维护，推荐您使用最新的HarmonyOS NEXT版本文档。详细请参考文档维护策略变更。
说明
提供画布组件。用于自定义绘制图形。
权限列表
无
子组件
不支持。
属性
支持通用属性。
样式
支持通用样式。
事件
支持通用事件。
方法
除支持通用方法外，还支持如下方法：
getContext
getContext(type: '2d', options?: ContextAttrOptions): CanvasRenderingContext2D
获取canvas绘图上下文。不支持在onInit和onReady中进行调用。
参数：
展开
| 参数名 | 参数类型 | 必填 | 描述 |
|---|---|---|---|
| type | string | 是 | 设置为'2d'，返回值为2D绘制对象，该对象可用于在画布组件上绘制矩形、文本、图片等。 |
| options6+ | ContextAttrOptions | 否 | 当前仅支持配置是否开启抗锯齿功能，默认为关闭。 |
表1 ContextAttrOptions
展开
| 参数名 | 类型 | 说明 |
|---|---|---|
| antialias | boolean | 是否开启抗锯齿功能，默认为false。 |
返回值：
展开
| 类型 | 说明 |
|---|---|
| CanvasRenderingContext2D | 用于在画布组件上绘制矩形、文本、图片等。 |
toDataURL6+
toDataURL(type?: string, quality?: number): string
生成一个包含图片展示的URL。
参数：
展开
| 参数名 | 参数类型 | 必填 | 描述 |
|---|---|---|---|
| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 |
返回值：
展开
| 类型 | 说明 |
|---|---|
| string | 图像的URL地址。 |
示例
收起
自动换行
深色代码主题
复制
- <!-- xxx.hml -->
- <div>
- <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
- <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
- </div>
收起
自动换行
深色代码主题
复制
- // xxx.js
- export default {
- handleClick() {
- const el = this.$refs.canvas1;
- var dataURL = el.toDataURL();
- console.log(dataURL);
- // "data:image/png;base64,xxxxxxxx..."
- }
- }
华为开发者联盟 版权所有 ©2026
在 API参考 中进行搜索
请输入您想要搜索的关键词