canvas组件

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

权限列表

无

子组件

不支持。

属性

支持通用属性。

样式

支持通用样式。

事件

支持通用事件。

方法

除支持通用方法外，还支持如下方法：

名称	参数	描述
getContext	getContext ( type: '2d', attributes⁶⁺: { antialias: boolean } ) => CanvasRendering2dContext	获取canvas绘图上下文。调用方法如下两种⁶⁺： var ctx = canvas.getContext(contextType); var ctx = canvas.getContext(contextType, contextAttributes); 其中contextType为必填项，当前支持"2d"，contextAttributes为可选参数，当前仅支持配置是否开启抗锯齿功能，默认为关闭。 contextType对应的上下文对象如下： "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

获取canvas绘图上下文。调用方法如下两种⁶⁺：

var ctx = canvas.getContext(contextType);

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

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

contextType对应的上下文对象如下：

"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.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..."
  }
}

OpenHarmony-build / docs

canvas组件

权限列表

子组件

属性

样式

事件

方法

示例

简介

发行版

贡献者

近期动态

OpenHarmony-build / docs .gitee-modal { width: 500px !important; }

canvas组件

权限列表

子组件

属性

样式

事件

方法

示例

简介

发行版

贡献者

近期动态

搜索帮助

OpenHarmony-build / docs