微信小程序能用canvas吗

微信公开课小程序热门讨论「微信小程序能用canvas吗」最新回复-微信小程序里的canvas非h5canvas有很多不一样的地方，以下把微信小程序的canvas叫做wxcanvas下面全是我一点点测试出的干货，耐心看：1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式，可以理解为他就是个框吧；2.wxcanvas不要当成真的H5canvas，就当它是个div就行，画出范围的东西也是存在的，改变width,height就显示出来了，或者说这里有重绘，但具体如何实现的不知道；3.改变wxcanvas的style的width,height，并不改为原画布上的东西的大小；4.csstransform变换中的变大缩小也无法改变原画布上的东西大小5.官方说法：context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟canvas/不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个canvas/。实际上，context.getActions()后，context中的信息会被清空，如果想重复利用，需要vartemp=context.getActions()将操作数组保存下来，才可重复用于wx.drawcanvas；6.注意wx.drawCanvas({canvasId:target,actions:context.getActions()});默认会清空画布，想不清空需要wx.drawCanvas({canvasId:target,actions:context.getActions(),reserve:true});7.《重点》canvasdisablescroll=truecatchtouchmove=ccvsMovebindtouchmove=cvsMovecanvasid=targetid=targetstyle=width:{{width}}px;height:{{height}}px/canvas注意，disablescroll=true和bindtouchmove=cvsMove同时存在时才能避免页面跟着动，catchtouchmove是不行的上面的写法，ccvsMove和cvsMove会都触发，ccvsMove返回的是普通touch事件对象，有pageX,clientX等，cvsMove返回的是canvasTouch事件对象，没有pageX,clientX,只有x,y8.wx.drawCanvas({canvasId:target,actions:[],reserve:false});可以清空画布和画布的状态9.画布的scaletranlaterotate等状态，在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:functionsuccess(res){wx.saveFile({tempFilePath:res.tempFilePath,success:functionsuccess(res){console.log(saved::+res.savedFilePath);},complete:functionfail(e){console.log(e.errMsg);}});},complete:functioncomplete(e){console.log(e.errMsg);}});
有专用的组件用：jmGraph网页链接 更多有关「微信小程序能用canvas吗」的疑问请扫码关注微信公开课+小程序！了解更多