原创内容，转载请注明原文网址：http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2019/0107/316.html
常州微信公众号开发-微信小程序一般问题解答
Q：在微信小程序的canvas相关api中，发现缺少将canvas转换成图片的相关api接口。如drawImage系列接口。
Q：在微信小程序的canvas相关api中，发现缺少将canvas转换成图片的相关api接口。如drawImage系列接口。
A：6.3.30 已支持 wx.canvasToTemFilePath 用于将 canvas 转成图片临时文件路径。
Q：您好，在小程序的api 中是否有获取图片原始宽高的接口？常州手机App外包具体需求场景：在canvas 中实现对wx.chooseImage后的图片进行一定比例的放缩功能。
A：6.3.30 已支持，image 组件的 bindload 事件可以返回图片的原始宽高。
相关讨论一：
想做一个画板（自由绘画）的那种。发现每当我调用wx.drawCanvas()时就会把上一笔画出来的线清掉。部分代码如下。还望大神看看是不是我自己写的哪里有错误。x,y分别是获取当前触摸点坐标的function。。。这样写永远只是常州App开发培训显示出当前画的。。。这在原生canvas中是不存在这种现象的，原生的不清除就不会消失啊。
[AppleScript] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
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() });} |
相关讨论二：
微信小程序 在canvas画布上划动，如何阻止页面上下动？
我在做一个用canvas画图的小程序，但我在画时，页面总是跟着上下动，怎么解决呢，catchtouchmove,并不能阻止页面的上拖，下拽。fixed也不保持页面相对屏幕不动。scroll-view在内部元素不能再上下拖动时也会使整个页面上下拖拽。
在iphone6真机上测试的，开发者工具内是没问题的，要能在真机上测试通过的方法。
相关讨论三：
小程序 canvas不能使用setInterval定时刷新了？
微信小程序对原生的H5特性都做了一些封装，改成自己的小程序组件了。 兴趣来了，做一个常用的canvas时钟试试， 结果试到最后，发现并不能异步的刷新canvas， 以为是我代码有问题， 改成原生的到浏览器一跑，发现是正常的。 各位有发现这个问题吗？
回答者：常州平台运营
刚刚看了小程序的demo， 发现，每次定时刷新的时候，都需要重新创建一次context和drawCanvas一次。
//错误写法
[AppleScript] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
|
onLoad(){ let context = wx.createContext() draw() setInterval(this.draw, 1000) wx.drawCanvas({ canvasId: 'clockCanvas', actions: context.getActions() })},draw() {}// 这里是具体画时钟的代码 |
// 正确写法
[AppleScript] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
|
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画画时一选择画笔的粗细时就不生效了在微信小程序开发者工具上调试时还是可以的，但一到手机上预览就不行了，不知道怎么回事
相关讨论六：
canvas的有些方法不生效？
发现canvas的 context.clearActions() 方法和 wx.canvasToTempFilePath() 这两个方法不生效
回答者：常州微信公众平台开发、context.clearActions()方法确实不生效，但却可以用下面方法来代替：
[AppleScript] 纯文本查看 复制代码
|
1
2
3
4
5
|
context.clearRect(0, 0, 320, 320)[/size][size=18px] wx.drawCanvas({[/size][size=18px] canvasId: 1,[/size][size=18px] actions: context.getActions()[/size][size=18px] }) |
2、wx.canvasToTempFilePath()的写法注意点就可以了：
[AppleScript] 纯文本查看 复制代码
|
1
2
3
4
5
6
7
8
9
|
wx.canvasToTempFilePath({ canvasId: '1', success: function (res) { console.log(res); }, fail: function (res) { console.log(res); } }); |
这样写在真机的控制台上是可以看到返回的对象的，也就是生成的图片途径
相关讨论七：
wx.canvasToTempFilePath无效
之前的版本wx.canvasToTempFilePath是有效的，但是更新了最新版本这个方法就不起作用了，打了log之后，success，fail，complete都没进去
相关问题八：
如何获取canvas的尺寸（高度和宽度）我要在canvas上画坐标，但是如何获取canvas的尺寸（高度和宽度）呢？
相关问题九：
scroll-view嵌套canvas的问题
现在好像scroll-view可以嵌套canvas了，但是在开发者工具中滑动是没问题的，在真机上滑动就会卡顿了
相关讨论十：
canvas和canvas之间的层级问题
canvas和canvas之间的层级可以设置吗？页面上如果有两个canvas，那么他们层级是怎么区分谁高谁低呢？
答：Can 官方
上篇：上一篇：常州小程序开发-Canvas使用总结
下篇：下一篇：常州微信小程序开发-canvas不显示问题
