canvas畫布
本文編輯： JeremyLu瀏覽 4899
版權所有，嚴禁轉載
組件說明:
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營：
微信小程序實戰5營：
