canvas-画布-组件-API参考-ASCF框架

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

起始版本： 1.0.0

约束与限制：

canvas标签默认宽度300px、高度150px。
同一页面中的canvas-id不可重复，如果使用一个已经出现过的canvas-id，该canvas标签对应的画布将被隐藏并不再正常工作。
Canvas 2D需要显式设置画布宽高，默认：300px*150px，最大：1365px*1365px。

属性：

展开

名称	类型	默认值	必填	描述
type	string	-	否	canvas类型，支持2d。
canvas-id	string	-	否	canvas组件的唯一标识符。
disable-scroll	boolean	false	否	禁止屏幕滚动以及下拉刷新。
bindtouchstart	eventhandle	-	否	手指触摸动作开始。
bindtouchmove	eventhandle	-	否	手指触摸后移动。
bindtouchend	eventhandle	-	否	手指触摸动作结束。
bindtouchcancel	eventhandle	-	否	手指触摸动作被打断，如锁屏、切换应用、来电提醒。
bindlongtap	eventhandle	-	否	手指长按350ms后触发长按事件，长按的时长超过500ms之后，移动不会触发屏幕的滚动。
binderror	eventhandle	-	否	当发生错误时触发error事件，detail.errMsg。

示例：

hxml文件：

收起
自动换行
深色代码主题
复制
<canvas
  canvas-id="canvas"
  disable-scroll="{{false}}"
  style="border: 3px solid blue">
</canvas>
<button bindtap="setFontSize">设置字体大小</button>

js文件：

收起
自动换行
深色代码主题
复制
Page({
  setFontSize() {
    const ctx = has.createCanvasContext('canvas');
    ctx.setFontSize(20);
    ctx.fillText('20', 20, 20);
    ctx.draw();
  }
});