canvas 画布

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">
        <canvas
            canvas-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 组件不能使用动画进行控制。