189 8069 5689
这篇文章主要介绍小程序canvas开发的注意事项有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
成都创新互联服务项目包括神池网站建设、神池网站制作、神池网页制作以及神池网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，神池网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到神池省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
微信小程序 wxcanvas
测试手机为IPHONE6,开发者工具版本0.10.102800。开发者工具0.11.112301版本也一样
微信小程序里的canvas 非 h6 canvas有很多不一样的地方，以下把微信小程序的canvas叫做wxcanvas
下面全是我一点点测试出的干货，耐心看：
1.wxcanvas,不像h6canvas那样有width和height属性和width和height的style样式。他只有style样式，可以理解为他就是个框吧；
2.wxcanvas不要当成真的H5canvas，就当它是个p就行，画出范围的东西也是存在的，改变width,height就显示出来了，或者说这里有重绘，但具体如何实现的不知道；
3.改变wxcanvas的style的width,height，并不改为原画布上的东西的大小；
4.css transform变换中的变大缩小也无法改变原画布上的东西大小
5.官方说法：context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个。
实际上，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.《重点》
注意，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开发的注意事项有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！