企业网站做广告,驻马店营销型网站建设,wordpress 页面 分类,品牌建设有哪些方面测试手机为IPHONE6,开发者工具版本0.10.102800。开发者工具0.11.112301版本也一样 微信小程序里的canvas 非 h5 canvas有很多不一样的地方#xff0c;以下把微信小程序的canvas叫做wxcanvas 下面全是我一点点测试出的干货#xff0c;耐心看#xff1a; 1.wxcanvas,不像h5can…测试手机为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 tempcontext.getActions()将操作数组保存下来才可重复用于wx.drawcanvas 6.注意 wx.drawCanvas({canvasId: target,actions: context.getActions()
}); 默认会清空画布想不清空需要 wx.drawCanvas({canvasId: target,actions: context.getActions(),reserve:true
}); 7.《重点》 canvas disable-scrolltrue catchtouchmoveccvsMove bindtouchmovecvsMove canvas-idtarget idtarget stylewidth:{{width}}px;height:{{height}}px/canvas 注意disable-scrolltrue和bindtouchmovecvsMove同时存在时才能避免页面跟着动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);}}); 转载于:https://www.cnblogs.com/shuchong/p/6074505.html
