測試手機為IPHONE6,開發者工具版本0.10.102800
微信小程式裡的canvas 非h5 canvas有很多不一樣的地方,以下把微信小程式的canvas叫做wxcanvas
下面全是我一點點測試出的乾貨,耐心看:
1.wxcanvas,不像h5canvas那樣有width和height屬性和width和height的style樣式。他只有style樣式,可以理解為他就是個框吧;
2.wxcanvas不要當成真的H5canvas,就當它是個p就行,畫出範圍的東西也是存在的,改變width,height就顯示出來了,或者說這裡有重繪,但具體如何實現的不知道;
3.改變wxcanvas的style的width,height,並不改為原始畫布上的東西的大小;
4.css transform變換中的變大縮小也無法改變原畫布上的東西大小
5.官方說法:context只是一個記錄方法調用的容器,用於產生記錄繪製行為的actions數組。 context跟9eb6a00f944b38c7333d032ed32cee03不存在對應關係,一個context產生畫布的繪製動作陣列可以應用在多個9eb6a00f944b38c7333d032ed32cee03。
實際上,context.getActions()後,context中的資訊會被清空,如果想重複利用,需要var temp=context.getActions()將操作數組儲存下來,才可重複用於wx .drawcanvas;
6.注意
wx.drawCanvas({ canvasId: 'target', actions: context.getActions() });
預設會清空畫布,想不清空需要
wx.drawCanvas({ canvasId: 'target', actions: context.getActions(), reserve:true });
7.《重點》
#<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style='width:{{width}}px;height:{{height}}px'></canvas>
注意,disable-scroll="true"和bindtouchmove="cvsMove"同時存在時才能避免頁面跟著動,catchtouchmove是不行的
上面的寫法,ccvsMove和cvsMove會都觸發,
ccvsMove回傳的是普通touch事件物件,有pageX,clientX等,
cvsMove回傳的是canvasTouch事件對象,沒有pageX,clientX,只有x,y
8.
wx.drawCanvas({ canvasId: 'target', actions: [], reserve:false });
可以清空畫布和畫布的狀態
9.畫布的scale tranlate rotate等狀態,在reserve :true時會接著上次的狀態
10. context.getActions()回傳的陣列很有用,印出來你會發現裡面的內容你都能看懂,可以直接修改陣列改變畫的動作
11.wx.drawCanvas時context.drawImage在手機上可以畫出來,在電腦開發工具上畫不出來
12.wx.canvasToTemp#FilePath
官方文件中只有一行,原來
wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete,和wx.saveFile差不多;
wx.canvasToTempFilePath({ canvasId: 'target', success: function success(res) { wx.saveFile({ tempFilePath: res.tempFilePath, success: function success(res) { console.log('saved::' + res.savedFilePath); }, complete: function fail(e) { console.log(e.errMsg); } }); }, complete: function complete(e) { console.log(e.errMsg); } });
#
以上是微信小程式canvas的詳情介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!