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

創(chuàng)新互聯(lián)公司專注于古城企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設公司,成都商城網(wǎng)站開發(fā)。古城網(wǎng)站建設公司,為古城等地區(qū)提供建站服務。全流程按需規(guī)劃網(wǎng)站，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

測試手機為IPHONE6,開發(fā)者工具版本0.10.102800

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

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

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

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

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

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

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

實際上，context.getActions()后，context中的信息會被清空，如果想重復利用，需要var temp=context.getActions()將操作數(shù)組保存下來，才可重復用于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會都觸發(fā)，

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

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

8.

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

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

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

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

11.wx.drawCanvas時context.drawImage在手機上可以畫出來，在電腦開發(fā)工具上畫不出來

12.wx.canvasToTempFilePath

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

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

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

文章題目：小程序開發(fā)中的wxcanvas是什么-創(chuàng)新互聯(lián)
文章位置：http://chinadenli.net/article8/dhseip.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計公司、自適應網(wǎng)站、網(wǎng)站營銷、App開發(fā)、商城網(wǎng)站、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)