canvas 画布
收藏我的收藏
收藏基础库 1.0.0 开始支持本组件。 基础库 1.78.0 开始支持 v2 版本。
画布。可使用 JS 操作 Canvas 上下文进行绘制。
目前支持 v1，v2 两个版本，说明如下：
- •v1：通过 tt.createCanvasContext 获取 canvas 上下文。本方案的 canvas 组件为 web 组件。
- •v2：属性 type 为
2d 或 webgl。需通过 SelectorQuery 获取 Canvas 实例 使用相关能力。本方案的 canvas 组件为原生组件，使用时请注意原生组件相关限制。属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
canvas-id | string | | 是 | [v1]canvas 组件的标识 | 1.0.0 |
type | string | | 是 | [v2]指定 canvas 类型，有效值为 "2d" 和 "webgl" | 1.78.0 |
bindtouchstart | EventHandle | | 否 | [v2]手指触摸动作开始 | 1.78.0 |
bindtouchmove | EventHandle | | 否 | [v2]手指触摸后移动 | 1.78.0 |
bindtouchend | EventHandle | | 否 | [v2]手指触摸动作结束 | 1.78.0 |
bindtouchcancel | EventHandle | | 否 | [v2]手指触摸动作被打断 | 1.78.0 |
扫码体验
代码示例
Bug & Tip
- •Tip: 组件的默认宽度为 300px，高度为 225px。
- •Tip: iOS 下， 组件的画布面积(宽度 ✖️ 高度)最大为 16777216 。
- •Tip: 若指定了
type 属性，且为合法值，则为 canvas 新方案，该组件为原生组件，使用时请注意相关限制。- •Tip: 【V2】
Android 基础库 1.87.0 起支持同层渲染。- •Tip: 【V2】若修改 组件的宽高，也需要修改对应 canvas 画布的宽高(如
CanvasContext.canvas.width=100)。- •Tip: 【V2】画布初始尺寸同组件尺寸，插入后需要将画布尺寸设置为设备相同比例，同时缩放 CanvasContext x，y 轴方向比例，可参考 代码示例。
点击纠错
