canvas组件
提供画布组件。用于自定义绘制图形。
权限列表
无
子组件
不支持。
属性
支持通用属性。
样式
支持通用样式。
事件
支持通用事件。
方法
除支持通用方法外,还支持如下方法:
getContext ( type: '2d', attributes6+: { antialias: boolean } ) => CanvasRendering2dContext |
var ctx = canvas.getContext(contextType); var ctx = canvas.getContext(contextType, contextAttributes); 其中contextType为必填项,当前仅支持"2d",contextAttributes为可选参数,当前仅支持配置是否开启抗锯齿功能,默认为关闭。 获取canvas绘图上下文,参数仅支持“2d”,返回值为2D绘制对象,该对象提供具体的2D绘制操作。详见CanvasRenderingContext2D对象章节。 |
|
|
示例
<!-- 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..."
}
}