微信小程式 wxcanvas
測試手機為IPHONE6,開發者工具版本0.10.102800。開發者工具0.11.112301版本也一樣
微信小程式裡的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跟不存在對應關係，一個context產生畫布的繪製動作數組可以應用於多個。
實際上，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.《重點》> ="cvsMove"同時存在時才能避免頁面跟著動，catchtouchmove是不行的
上面的寫法，ccvsMove和cvsMove會都觸發，
ccvsMove返回的是普通touch事件對象，有pageX,clientX等，
ccvsMove回傳的是普通touch事件對象，有pageX,clientX等，cc回傳的是canvasTouch事件對象，沒有pageX,clientX,只有x,y
8.
<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style='width:{{width}}px;height:{{height}}px'></canvas>可以清空畫布和畫布的狀態
9.畫布的scale時會接著上次的狀態
10. context.getActions()返回的數組很有用，打印出來你會發現裡面的內容你都能看懂，可以直接修改數組改變畫的動作
11.wx. drawCanvas時context.drawImage在手機上可以畫出來，在電腦開發工具上畫不出來
12.wx.canvasToTempFilePath
官方文件中只有一行，原來
wx.canvasToFileFile參數為一個物件包含vasID,succ fail,complete，和wx.saveFile差不多；
wx.drawCanvas({
canvasId: 'target',
actions: [],
reserve:false
});
感謝閱讀，希望能幫助大家，謝謝大家對本站的支持！
更多微信小程式 canvas開發實例及注意事項相關文章請關注PHP中文網！
