# canvas组件 - [权限列表](#zh-cn_topic_0000001127284886_section11257113618419) - [子组件](#zh-cn_topic_0000001127284886_section9288143101012) - [属性](#zh-cn_topic_0000001127284886_section2907183951110) - [样式](#zh-cn_topic_0000001127284886_section5775351116) - [事件](#zh-cn_topic_0000001127284886_section1729055142211) - [方法](#zh-cn_topic_0000001127284886_section47669296127) - [示例](#zh-cn_topic_0000001127284886_section42931433142318) 提供画布组件。用于自定义绘制图形。 ## 权限列表无 ## 子组件不支持。 ## 属性支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)。 ## 样式支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 ## 事件支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 ## 方法除支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，还支持如下方法：

名称	参数	描述
getContext	getContext ( type: '2d', attributes⁶⁺: { antialias: boolean } ) => CanvasRendering2dContext	调用方法如下两种⁶⁺： var ctx = canvas.getContext(contextType); var ctx = canvas.getContext(contextType, contextAttributes); 其中contextType为必填项，当前仅支持"2d"，contextAttributes为可选参数，当前仅支持配置是否开启抗锯齿功能，默认为关闭。获取canvas绘图上下文，参数仅支持 “2d”，返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见CanvasRenderingContext2D对象章节。不支持在onInit和onReady中进行调用。
toDataURL⁶⁺	string type, number encoderOptions	生成一个包含图片展示的URL。 type：可选参数，用于指定图像格式，默认格式为image/png。 encoderOptions：在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。

名称

参数

描述

getContext

getContext ( type: '2d', attributes⁶⁺: { antialias: boolean } ) => CanvasRendering2dContext

调用方法如下两种⁶⁺：

var ctx = canvas.getContext(contextType);

var ctx = canvas.getContext(contextType, contextAttributes);

其中contextType为必填项，当前仅支持"2d"，contextAttributes为可选参数，当前仅支持配置是否开启抗锯齿功能，默认为关闭。

获取canvas绘图上下文，参数仅支持 “2d”，返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见CanvasRenderingContext2D对象章节。

不支持在onInit和onReady中进行调用。

toDataURL⁶⁺

string type, number encoderOptions

生成一个包含图片展示的URL。

type：可选参数，用于指定图像格式，默认格式为image/png。
encoderOptions：在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。

## 示例 ```

``` ``` // xxx.js export default { handleClick() { const el = this.$refs.canvas1; var dataURL = el.toDataURL(); console.log(dataURL); // "data:image/png;base64,xxxxxxxx..." } } ```