小程序中canvas测试心得

微信
小程序里的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.注意

1. wx.drawCanvas({
2. 　　canvasId: ‘target’,
3. 　　actions: context.getActions()
4. });

默认会清空画布，想不清空需要

1. wx.drawCanvas({
2.     canvasId: ‘target’,
3.     actions: context.getActions(),
4.     reserve:true
5. });

7.重点

1. <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.可以清空画布和画布的状态

1. wx.drawCanvas({
2.     canvasId: ‘target’,
3.     actions: [],
4.     reserve:false
5. });

9.画布的scale tranlate rotate等状态，在reserve:true时会接着上次的状态 10. context.getActions()返回的数组很有用，打印出来你会发现里面的内容你都能看懂，可以直接修改数组改变画的动作 11.w x.drawCanvas时context.drawImage在手机上可以画出来，在电脑开发工具上画不出来 12.wx.canvasToTempFilePath 官方文档中只有一行，原来 wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wx.saveFile差不多；

1. wx.canvasToTempFilePath({
2.               canvasId: ‘target’,
3.               success: function success(res) {
4.                 wx.saveFile({
5.                   tempFilePath: res.tempFilePath,
6.                   success: function success(res) {
7.                     console.log(‘saved::’ + res.savedFilePath);
8.                   },
9.                   complete: function fail(e) {
10.                     console.log(e.errMsg);
11.                   }
12.                 });
13.               },
14.               complete: function complete(e) {
15.                 console.log(e.errMsg);
16.               }
17.             });

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。