測試手機為IPHONE6,開發者工具版本0.10.102800。開發者工具0.11.112301版本也一樣

微信小程序里的canvas 非 h5 canvas有很多不一樣的地方，以下把微信小程序的canvas叫做wxcanvas

?

下面全是我一點點測試出的干貨，耐心看：

1.wxcanvas,不像h5canvas那樣有width和height屬性和width和height的style樣式。他只有style樣式，可以理解為他就是個框吧；

2.wxcanvas不要當成真的H5canvas，就當它是個div就行，畫出范圍的東西也是存在的，改變width,height就顯示出來了，或者說這里有重繪，但具體如何實現的不知道；

3.改變wxcanvas的style的width,height，并不改為原畫布上的東西的大小；

4.css transform變換中的變大縮小也無法改變原畫布上的東西大小

5.官方說法：context只是一個記錄方法調用的容器，用于生成記錄繪制行為的actions數組。context跟<canvas/>不存在對應關系，一個context生成畫布的繪制動作數組可以應用于多個<canvas/>。

實際上，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.canvasToTempFilePath

官方文檔中只有一行，原來

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);}});

?

轉載于:https://www.cnblogs.com/shuchong/p/6074505.html

總結

以上是生活随笔為你收集整理的微信 小程序 canvas的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。