微信小程序之畫布canvas組件的介紹和基本使用
此文章主要是對canvas組件的介紹與基本的使用。在組件中繪畫了一條固定的直線。
我們先了解一下canvas組件:
wxml:
<canvas binderror=
"canvasIdErrorCallback"
bindtouchend=
"EventHandle"
bindtouchstart=
"EventHandleStart"
canvas-id=
"myCanvas"
class=
"myCanvas"
disable_scroll=
""
></canvas
注:
canvas 標簽?zāi)J寬度300px、高度225px同一頁面中的 canvas-id 不可重復(fù),如果使用一個已經(jīng)出現(xiàn)過的 canvas-id,該 canvas 標簽對應(yīng)的畫布將被隱藏并不再正常工作disable_scroll屬性可以禁止畫布在移動時且有手勢事件時,禁止屏幕滾動以及下拉刷新
wxss:
.myCanvas{ border: 1px solid; //給一個邊框 }
咱們看一下js中是怎么對carvas操作的
//test.js Page({ data: {}, onLoad: function () {}, onReady:function(){ var my_carvas = wx.createCanvasContext('myCanvas', this) //1.創(chuàng)建carvas實例對象,方便后續(xù)使用。 my_carvas.setStrokeStyle('red') //設(shè)置邊框顏色。 my_carvas.moveTo(20,100) //設(shè)置繪畫路線的起點 (20,100)>>>(當前畫布對象的 x 軸,當前畫布對象的 y 軸) my_carvas.lineTo(120, 100) //增加一個新點,然后創(chuàng)建一條從上次指定點到目標點的線。(120,100)>>>(當前畫布對象的 x 軸,當前畫布對象的 y 軸) my_carvas.stroke() //畫出當前路徑的邊框。默認顏色色為黑色。 my_carvas.draw() //將之前在繪圖上下文中的描述(路徑、變形、樣式)畫到 canvas 中。 } })
設(shè)置起點與終點,繪畫一條直線如圖:(由左至右100個像素點)
canvas標簽屬性:
畫布。
屬性名 | 類型 | 默認值 | 說明 |
---|---|---|---|
canvas-id | String | canvas 組件的唯一標識符 | |
disable-scroll | Boolean | false | 當在 canvas 中移動時且有綁定手勢事件時,禁止屏幕滾動以及下拉刷新 |
bindtouchstart | EventHandle | 手指觸摸動作開始 | |
bindtouchmove | EventHandle | 手指觸摸后移動 | |
bindtouchend | EventHandle | 手指觸摸動作結(jié)束 | |
bindtouchcancel | EventHandle | 手指觸摸動作被打斷,如來電提醒,彈窗 | |
bindlongtap | EventHandle | 手指長按 500ms 之后觸發(fā),觸發(fā)了長按事件后進行移動不會觸發(fā)屏幕的滾動 | |
binderror | EventHandle | 當發(fā)生錯誤時觸發(fā) error 事件,detail = {errMsg: 'something wrong'} |
注意事項:Bug & Tip
tip:canvas組件是由客戶端創(chuàng)建的原生組件,它的層級是最高的,不能通過 z-index 控制層級。tip: 請勿在scroll-view、swiper、picker-view、movable-view中使用canvas組件。tip:css動畫對canvas組件無效。bug: 避免設(shè)置過大的寬高,在安卓下會有crash的問題