小程序canvas開發(fā)的注意事項(xiàng)有哪些

這篇文章主要介紹小程序canvas開發(fā)的注意事項(xiàng)有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括神池網(wǎng)站建設(shè)、神池網(wǎng)站制作、神池網(wǎng)頁制作以及神池網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，神池網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到神池省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

微信小程序 wxcanvas

測(cè)試手機(jī)為IPHONE6,開發(fā)者工具版本0.10.102800。開發(fā)者工具0.11.112301版本也一樣

微信小程序里的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就行，畫出范圍的東西也是存在的，改變width,height就顯示出來了，或者說這里有重繪，但具體如何實(shí)現(xiàn)的不知道；

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

4.css transform變換中的變大縮小也無法改變?cè)嫴忌系臇|西大小

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

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

6.注意

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

默認(rèn)會(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í)才能避免頁面跟著動(dòng)，catchtouchmove是不行的

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

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

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

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

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

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

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

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

12.wx.canvasToTempFilePath

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

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

以上是“小程序canvas開發(fā)的注意事項(xiàng)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：小程序canvas開發(fā)的注意事項(xiàng)有哪些
文章起源：http://bm7419.com/article40/gihoho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、服務(wù)器托管、定制網(wǎng)站、微信公眾號(hào)、品牌網(wǎng)站設(shè)計(jì)

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

猜你還喜歡下面的內(nèi)容