canvas画布

本文编辑： JeremyLu JeremyLu浏览 5095 版权所有，严禁转载

组件说明:

canvas画布，你可以理解为有一张白布，你可以在画布上画出不同形状、颜色、粗细的图形。

组件用法：

wxml

<canvas class="canvas1" canvas-id="canvas1" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove" bindtouchend="mytouchend"></canvas>

js

Page({
  ...
  mytouchstart: function(e){
   console.log('touchstart')
  },
  mytouchmove: function(e){
    console.log('touchmove')
  },
  mytouchend: function(e){
    console.log('touchend')
  }
  ...
})

wxss

.canvas1{
    background-color: #E0E0E0;
}

主要属性：

属性 类型 描述
canvas-id String canvas组件唯一标识符
disable-scroll Boolean 当手指在canvas上移动时，是否允许页面下拉刷新和页面滚动
bindtouchstart EventHandle 绑定手指开始触摸事件
bindtouchmove EventHandle 绑定手指触摸移动事件
bindtouchend EventHandle 绑定手指触摸结束事件
bindtouchcancel EventHandle 绑定手指触摸意外中断事件，例如弹窗，来电
binderror EventHandle 当发生错误时触发 error 事件，detail = {errMsg: ‘something wrong’}

注：

  • canvas组件支持大部分事件类型，也支持catch开头非冒泡事件。
  • canvas组件默认默认宽度300px、高度225px。
  • 一个页面中canvas-id不能重复使用。
  • 请勿在scroll-view中使用canvas

相关链接：

如有技术问题或对本文有反馈，请加入QQ群：
微信小程序实战5营： 微信小程序Club实战5营