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