關於微信小程式canvas的開發-小程式開發-PHP中文網

關於微信小程式canvas的開發

不言

發布： 2018-06-22 16:31:16

原創

1861 人瀏覽過

這篇文章主要介紹了微信小程式wxcanvas開發實例及注意事項的相關資料,這裡對微信canvas與H5中的canvas做對比，並說明注意事項，需要的朋友可以參考下

#微信小程式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.getActions()後，context中的資訊會被清空，如果想重複利用，需要var temp=context.getActions()將操作數組儲存下來，才可重複用於wx .drawcanvas;

6.注意

wx.drawCanvas({
　　canvasId: &#39;target&#39;,
　　actions: context.getActions()
});

登入後複製

預設會清空畫布，想不清空需要

wx.drawCanvas({
  canvasId: &#39;target&#39;,
  actions: context.getActions(),
  reserve:true
});

登入後複製

7.《重點》

<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style=&#39;width:{{width}}px;height:{{height}}px&#39;></canvas>

登入後複製

注意，disable-scroll="true"和bindtouchmove="cvsMove"同時存在時才能避免頁面跟著動，catchtouchmove是不行的

上面的寫法，ccvsMove和cvsMove會都觸發，

ccvsMove回傳的是普通touch事件對象，有pageX,clientX等，

cvsMove回傳的是canvasTouch事件對象，沒有pageX,clientX,只有x,y

wx.drawCanvas({
  canvasId: &#39;target&#39;,
  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: &#39;target&#39;,
       success: function success(res) {
        wx.saveFile({
         tempFilePath: res.tempFilePath,
         success: function success(res) {
          console.log(&#39;saved::&#39; + res.savedFilePath);
         },
         complete: function fail(e) {
          console.log(e.errMsg);
         }
        });
       },
       complete: function complete(e) {
        console.log(e.errMsg);
       }
      });

登入後複製

以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！