canvas组件

About 4 min

canvas组件

提供画布组件。用于自定义绘制图形。

权限列表

子组件

不支持。

属性

支持通用属性

样式

支持通用样式

事件

支持通用事件

方法

除支持通用方法外,还支持如下方法:

getContext

getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext

获取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>
1
2
3
4
5
// xxx.js
export default {
  handleClick() {
    const el = this.$refs.canvas1;
    var dataURL = el.toDataURL();
    console.log(dataURL);
    // "data:image/png;base64,xxxxxxxx..."
  }
}
1
2
3
4
5
6
7
8
9