小程序開(kāi)發(fā)中的wxcanvas是什么

這篇文章將為大家詳細(xì)講解有關(guān)小程序開(kāi)發(fā)中的wxcanvas是什么，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

測(cè)試手機(jī)為IPHONE6,開(kāi)發(fā)者工具版本0.10.102800

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

下面全是我一點(diǎn)點(diǎn)測(cè)試出的干貨，耐心看：

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

2.wxcanvas不要當(dāng)成真的H5canvas，就當(dāng)它是個(gè)p就行，畫(huà)出范圍的東西也是存在的，改變width,height就顯示出來(lái)了，或者說(shuō)這里有重繪，但具體如何實(shí)現(xiàn)的不知道；

3.改變wxcanvas的style的width,height，并不改為原畫(huà)布上的東西的大??；

4.css transform變換中的變大縮小也無(wú)法改變?cè)?huà)布上的東西大小

5.官方說(shuō)法：context只是一個(gè)記錄方法調(diào)用的容器，用于生成記錄繪制行為的actions數(shù)組。context跟<canvas/>不存在對(duì)應(yīng)關(guān)系，一個(gè)context生成畫(huà)布的繪制動(dòng)作數(shù)組可以應(yīng)用于多個(gè)<canvas/>。

實(shí)際上，context.getActions()后，context中的信息會(huì)被清空，如果想重復(fù)利用，需要var temp=context.getActions()將操作數(shù)組保存下來(lái)，才可重復(fù)用于wx.drawcanvas；

6.注意

wx.drawCanvas({
　　canvasId: 'target',
　　actions: context.getActions()
});

默認(rèn)會(huì)清空畫(huà)布，想不清空需要

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

7.《重點(diǎn)》

<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"同時(shí)存在時(shí)才能避免頁(yè)面跟著動(dòng)，catchtouchmove是不行的

上面的寫(xiě)法，ccvsMove和cvsMove會(huì)都觸發(fā)，

ccvsMove返回的是普通touch事件對(duì)象，有pageX,clientX等，

cvsMove返回的是canvasTouch事件對(duì)象，沒(méi)有pageX,clientX,只有x,y

8.

wx.drawCanvas({
    canvasId: 'target',
    actions: [],
    reserve:false
});

可以清空畫(huà)布和畫(huà)布的狀態(tài)

9.畫(huà)布的scale tranlate rotate等狀態(tài)，在reserve:true時(shí)會(huì)接著上次的狀態(tài)

10. context.getActions()返回的數(shù)組很有用，打印出來(lái)你會(huì)發(fā)現(xiàn)里面的內(nèi)容你都能看懂，可以直接修改數(shù)組改變畫(huà)的動(dòng)作

11.wx.drawCanvas時(shí)context.drawImage在手機(jī)上可以畫(huà)出來(lái)，在電腦開(kāi)發(fā)工具上畫(huà)不出來(lái)

12.wx.canvasToTempFilePath

官方文檔中只有一行，原來(lái)

wx.canvasToTempFilePath參數(shù)為一個(gè)對(duì)象包括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);
              }
            });

關(guān)于“小程序開(kāi)發(fā)中的wxcanvas是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。