后浪云百度小程序教程：canvas 画布
- canvas 画布
- 属性说明
- 示例
- 代码示例
- Bug & Tip
canvas 画布
基础库版本 1.12.0 开始支持事件捕获、冒泡。
解释：画布。画布是一个矩形区域（默认宽度 300px、高度 225px ），开发者可以在页面上绘制图形。canvas 拥有多种绘制路径、矩形、图形、字符以及添加图像的方法。相关 API：swan.createCanvasContext 该组件是客户端创建的原生组件，使用时请注意相关限制。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
canvas-id | String | 是 | canvas 组件的唯一标识符 | |
disable-scroll | Boolean | false | 否 | 当在 canvas 中移动且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 |
bindtouchstart | EventHandle | 否 | 手指触摸动作开始 | |
bindtouchmove | EventHandle | 否 | 手指触摸后移动 | |
bindtouchend | EventHandle | 否 | 手指触摸动作结束 | |
bindtouchcancel | EventHandle | 否 | 手指触摸动作被打断，如来电提醒，弹窗 | |
bindlongtap | EventHandle | 否 | 手指长按 350ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 | |
binderror | EventHandle | 否 | 当发生错误时触发 error 事件，detail = {errMsg: ‘something wrong’} |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例
- SWAN
- JS
- CSS
<view class="wrap"><view class="card-area"><canvascanvas-id="mycanvas"disable-scroll="false"bindtouchstart="touchstart"bindtouchmove="touchmove"bindtouchend="touchend"bindtouchcancel="touchcancel"bindlongtap="longtap"binderror="error"></canvas><view class="center-text">{{resultComment}}</view></view></view>
Bug & Tip
- Tip：canvas 组件不能使用动画进行控制。
版权声明：
作者：后浪云
链接：https://idc.net/help/186089/
文章版权归作者所有，未经允许请勿转载。
THE END