小程序极速实战开发《二十六》canvas画布，微信小程序开发案例教程

来源：未知 浏览 149次 时间 2021-06-10 07:02
组件说明:

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


组件用法：

小程序极速实战开发《二十六》canvas画布

小程序极速实战开发《二十六》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上移动时营销型企业网站你可以在画布上画出不同形状、颜色、粗细的图形。


组件用法：

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不能重复使用。

标签： 组件canvas事件EventHandle

上一篇: 小程序极速实战开发《二十八》wx.storage数据缓存，微信小程序开发团队
下一篇: [helloworld]-微信小程序教程-入门篇[3]，hellowland登录界面

热门文章

最新文章

QQ咨询