小程序答疑:跳坑《一百一十一》canvas学习及使用说明
admin
发表于 2017-05-27 22:15:19
AD：靠谱的微信小程序外包开发
微信小程序开发者社区（）为您整理了针对这些问题的一些解决方案，希望能够帮到您。
假如本帖中有错误或者需要补充的部分，欢迎提出或补充！
官方文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/canvas.html
相关人物：@jsh5css ，@安静的小智 ，@jeffer ，@guyoung ，@司小文 ，@jsh5css @hongweicao，你在遇到问题时，可以@他们；
相关文章：
的canvas相关api中，发现缺少将canvas转换成图片的相关api接口。如drawImage系列接口。
A：6.3.30 已支持 wx.canvasToTemFilePath 用于将 canvas 转成图片临时文件路径。
Q：您好，在小程序的api 中是否有获取图片原始宽高的接口？具体需求场景：在canvas 中实现对wx.chooseImage后的图片进行一定比例的放缩功能。
A：6.3.30 已支持，image 组件的 bindload 事件可以返回图片的原始宽高。
相关讨论一：
想做一个画板（自由绘画）的那种。发现每当我调用wx.drawCanvas()时就会把上一笔画出来的线清掉。部分代码如下。还望大神看看是不是我自己写的哪里有错误。x,y分别是获取当前触摸点坐标的function。。。这样写永远只是显示出当前画的一笔。。。这在原生canvas中是不存在这种现象的，原生的不清除就不会消失啊。坑啊坑啊坑啊………………
canvasTouchstart: function( e ) { context.setLineWidth(10); context.setLineCap(round); context.setStrokeStyle(#000000); context.moveTo( x(e), y(e) ); }, canvasTouchmove: function( e ) { context.lineTo( x(e), y(e) ); }, canvasTouchend: function( e ) { context.stroke(); wx.drawCanvas( { canvasId: canvas, actions: context.getActions() }); }
回答者：赵启明，wept作者drawCanvas 会清空画布，你需要把之前所有 actions 全部保存，然后一起传过去。
相关讨论二：
微信小程序 在canvas画布上划动，如何阻止页面上下动？
我在做一个用canvas画图的小程序，但我在画时，页面总是跟着上下动，怎么解决呢，catchtouchmove,并不能阻止页面的上拖，下拽。fixed也不保持页面相对屏幕不动。scroll-view在内部元素不能再上下拖动时也会使整个页面上下拖拽。
在iphone6真机上测试的，开发者工具内是没问题的，要能在真机上测试通过的方法。
回答者：知乎ID：山中有一郎
微信小程序官方文档有说明，disable-scroll=true 可以阻止页面下拉和滚动。这里有个坑，disable-scroll在真机上如果要生效，那么要给canvas绑定一个触摸事件才能生效。
顺便说一下canvas触摸事件的坑，在canvas上一定要绑定三个触摸事件真机才能响应到画布触摸的event。bindtouchstart/bindtouchmove/bindtouchend，只绑定两个或一个会导致真机获取不到canvas上的触摸事件。。。。。花了好长时间来找这个bug出现的原因。。。也是醉了
回答者：知乎ID：罗向宇
有一个比较取巧的办法……就是把container设置成fixed，这样不仅针对于canvas，对于其他没有disable-scroll的组件也会有效，不过你要重新处理里面元素的高度，否则就无法滚动了
相关讨论三：
小程序 canvas不能使用setInterval定时刷新了？
微信小程序对原生的H5特性都做了一些封装，改成自己的小程序组件了。 兴趣来了，做一个常用的canvas时钟试试， 结果试到最后，发现并不能异步的刷新canvas， 以为是我代码有问题， 改成原生的到浏览器一跑，发现是正常的。 各位有发现这个问题吗？
回答者：Kevin
刚刚看了小程序的demo， 发现，每次定时刷新的时候，都需要重新创建一次context和drawCanvas一次。
//错误写法
onLoad(){ let context = wx.createContext() draw() setInterval(this.draw, 1000) wx.drawCanvas({ canvasId: clockCanvas, actions: context.getActions() }) }, draw() {}// 这里是具体画时钟的代码
========================================================// 正确写法
onLoad(){ setInterval(this.run, 1000)} run(){ let context = wx.createContext() draw() // 这里是具体画时钟的代码 wx.drawCanvas({ canvasId: clockCanvas, actions: context.getActions() }) }, onUnload (){记得在这里clearInterval}
//也就是每次重绘的时候，都需要createContext() + draw + drawCanvas 三步。 与我们平时的写法有点区别。 原因是，小程序的canvas里的context 与canvas 并不是一对一的。而是context只记录了一些actions操作，并不是指向唯一的canvas。 我们需要在drawCanvas里将上下文与canvas绑定起来。
相关讨论五：
canvas画画时一选择画笔的粗细时就不生效了在者工具上调试时还是可以的，但一到手机上预览就不行了，不知道怎么回事
这个问题刚刚解决了， linewidth的值必须要严格的数字才生效之前不小心写成字符串了 现在好了
相关讨论六：
canvas的有些方法不生效？
发现canvas的 context.clearActions() 方法和 wx.canvasToTempFilePath() 这两个方法不生效
回答者：白鹭社区id：183652651661、context.clearActions()方法确实不生效，但却可以用下面方法来代替：
相关文章
精彩导读
热门资讯
关注我们
