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

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

 

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

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

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

3.改變wxcanvas的style的width,height,并不改為原畫布上的東西的大?。?/span>

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

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運(yùn),軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動(dòng)軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計(jì)培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式