|
導(dǎo)讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一項門檻非常高的創(chuàng)新,經(jīng)過將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。 測試手機(jī)為IPHONE6,開發(fā)者工具版本0.10.102800微信小程序里的canvas 非 h5 canvas有很多不一樣的地方,以下把微信小程序的canvas叫做wxcanvas 下面全是我一點(diǎn)點(diǎn)測試出的干貨,耐心看: 1.wxcanvas,不像h5canvas那樣有width和height屬性和width和height的style樣式。他只有style樣式,可以理解為他就是個框吧; 2.wxcanvas不要當(dāng)成真的H5canvas,就當(dāng)它是個p就行,畫出范圍的東西也是存在的,改變width,height就顯示出來了,或者說這里有重繪,但具體如何實(shí)現(xiàn)的不知道; 3.改變wxcanvas的style的width,height,并不改為原畫布上的東西的大小; 4.css transform變換中的變大縮小也無法改變原畫布上的東西大小 5.官方說法:context只是一個記錄方法調(diào)用的容器,用于生成記錄繪制行為的actions數(shù)組。context跟<canvas/>不存在對應(yīng)關(guān)系,一個context生成畫布的繪制動作數(shù)組可以應(yīng)用于多個<canvas/>。 實(shí)際上,context.getActions()后,context中的信息會被清空,如果想重復(fù)利用,需要var temp=context.getActions()將操作數(shù)組保存下來,才可重復(fù)用于wx.drawcanvas; 6.注意 wx.drawCanvas({
canvasId: 'target',
actions: context.getActions()
});默認(rèn)會清空畫布,想不清空需要 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"同時存在時才能避免頁面跟著動,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在手機(jī)上可以畫出來,在電腦開發(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);
}
});以上就是微信小程序canvas的詳情介紹的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應(yīng)用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!