微信小程序 canvas开发实例及注意事项

概述微信小程序wxcanvas测试手机为IPHONE6,开发者工具版本0.10.102800。开发者工具0.11.112301版本也一样

微信小程序 wxcanvas

测试手机为IPHONE6,开发者工具版本0.10.102800。开发者工具0.11.112301版本也一样

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

下面全是我一点点测试出的干货，耐心看：

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

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

总结

以上是内存溢出为你收集整理的微信小程序 canvas开发实例及注意事项全部内容，希望文章能够帮你解决微信小程序 canvas开发实例及注意事项所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。