微信小程序畫布
1. 小程序畫布是白底為什麼保存圖片後變成了黑底
應該是因為圖片為png格式,將格式修改為jpg格式看看。
2. 微信小程序canvas怎麼監聽canvas畫為空
1.canvas標簽默認寬度來300px、高度225px
2.同一頁面自中的canvas-id不可重復,如果使用一個已經出現過的canvas-id,該canvas標簽對應的畫布將被隱藏並不再正常工作
示例代碼:下載
?
1
2
3
4
5
6
7
<!-- canvas.wxml -->
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- 當使用絕對定位時,文檔流後邊的canvas的顯示層級高於前邊的canvas-->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!-- 因為canvas-id與前一個canvas重復,該canvas不會顯示,並會發送一個錯誤事件到AppService -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
// canvas.js
3. 微信小程序畫布 如何撤回當前畫錯的這一筆
這樣抄子重畫襲的話太慢了吧。看下這個博客http://blog.csdn.net/L_junpeng/article/details/79445662
4. 微信小程序能用canvas嗎
微信小程序里的canvas 非 h5 canvas有很多不一樣的地方,以下把微信小程序的canvas叫做
下面全是我一點點測試出的干貨,耐心看:
1.wxcanvas,不像h5canvas那樣有width和height屬性和width和height的style樣式。他只有style樣式,可以理解為他就是個框吧;
2.wxcanvas不要當成真的H5canvas,就當它是個div就行,畫出范圍的東西也是存在的,改變width,height就顯示出來了,或者說這里有重繪,但具體如何實現的不知道;
3.改變wxcanvas的style的width,height,並不改為原畫布上的東西的大小;
4.css transform變換中的變大縮小也無法改變原畫布上的東西大小
5.官方說法:context只是一個記錄方法調用的容器,用於生成記錄繪制行為的actions數組。context跟<canvas/>不存在對應關系,一個context生成畫布的繪制動作數組可以應用於多個<canvas/>。
實際上,context.getActions()後,context中的信息會被清空,如果想重復利用,需要var temp=context.getActions()將操作數組保存下來,才可重復用於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會都觸發,
ccvsMove返回的是普通touch事件對象,有pageX,clientX等,
cvsMove返回的是canvasTouch事件對象,沒有pageX,clientX,只有x,y
8.
wx.drawCanvas({ canvasId: 'target', 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: '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); }});
5. 微信小程序在canvas 畫布上劃動,如何阻止頁面上下動
可以重新打開這個小程序設置。
6. 微信小程序中利用canvas 2d繪制的海報,獲取圖片臨時地址第一次報錯,第二次又沒問題了,請問怎麼解決啊
微信小程序中利用繪制的海報獲取圖片,臨時地址,第一次報錯可進行下一次更正。
7. 微信小程序的canvas畫布功能怎麼用
微信小程序中有一個功能是canvas畫布功能,那麼這個功能該怎麼用呢?下面的教程就是關於微信小程序的canvas畫布功能怎麼用的,一起來看看吧。
微信小程序中有一個功能是canvas畫布功能,那麼這個功能該怎麼用呢?下面的教程就是關於微信小程序的canvas畫布功能怎麼用的,一起來看看吧。
canvas畫布,你可以理解為有一張白布,你可以在畫布上畫出不同形狀、顏色、粗細的圖形。
8. 小程序 canvas 怎麼改柱狀圖的顏色
jmGraph 支持小程序的canvas庫
https://github.com/jiamao/jmgraph
可以試下這個庫,每個方塊都可以做成一個對象,像操作dom一樣。
9. 微信小程序canvas能畫折線圖嗎
應該是可以滴