1# canvas组件 2 3>  **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6提供画布组件。用于自定义绘制图形。 7 8## 权限列表 9 10无 11 12 13## 子组件 14 15不支持。 16 17 18## 属性 19 20支持[通用属性](../arkui-js/js-components-common-attributes.md)。 21 22 23## 样式 24 25支持[通用样式](../arkui-js/js-components-common-styles.md)。 26 27 28## 事件 29 30支持[通用事件](../arkui-js/js-components-common-events.md)。 31 32 33## 方法 34 35除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： 36 37 38### getContext 39 40getContext(type: '2d', options?: ContextAttrOptions): CanvasRenderingContext2D 41 42获取canvas绘图上下文。不支持在onInit和onReady中进行调用。 43 44- 参数 45 | 参数名 | 参数类型 | 必填 | 描述 | 46 | -------- | -------- | -------- | -------- | 47 | type | string | 是 | 设置为'2d'，返回值为2D绘制对象，该对象可用于在画布组件上绘制矩形、文本、图片等。 | 48 | options<sup>6+</sup> | ContextAttrOptions | 否 | 当前仅支持配置是否开启抗锯齿功能，默认为关闭。 | 49 50 **表1** ContextAttrOptions 51 52 | 参数名 | 类型 | 说明 | 53 | -------- | -------- | -------- | 54 | antialias | boolean | 是否开启抗锯齿功能，默认为false。 | 55 56- 返回值 57 | 类型 | 说明 | 58 | -------- | -------- | 59 | [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 用于在画布组件上绘制矩形、文本、图片等。 | 60 61### toDataURL<sup>6+</sup> 62 63toDataURL(type?: string, quality?: number): string 64 65生成一个包含图片展示的URL。 66 67- 参数 68 | 参数名 | 参数类型 | 必填 | 描述 | 69 | -------- | -------- | -------- | -------- | 70 | type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 | 71 | quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 | 72 73- 返回值 74 | 类型 | 说明 | 75 | -------- | -------- | 76 | string | 图像的URL地址。 | 77 78## 示例 79 80```html 81<!-- xxx.hml --> 82<div> 83 <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 84 <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" /> 85</div> 86``` 87 88```css 89// xxx.js 90export default { 91 handleClick() { 92 const el = this.$refs.canvas1; 93 var dataURL = el.toDataURL(); 94 console.log(dataURL); 95 // "data:image/png;base64,xxxxxxxx..." 96 } 97} 98``` 99
