小程序关于微信小程序canvas的各种坑

如何看待微信公开课小程序热门讨论「小程序关于微信小程序canvas的各种坑」
摘要：小程序关于微信小程序canvas的各种坑
展开：[自力更生自给自足的解决了这些问题，遇到同样问题的朋友可以参考参考]1.用drawImage画线上图片在真机上显示不出来，模拟器上却可以显示（需要说明的是：drawImage画显示图片是需要获取到图片后才能开始画，并且获取的线上图片地址需要是https。）但是这些我都照做了可是真机上还是无法显示，为什么我也试过下载到本地后画也没有用。解决方法：首先，我发现用canvas绘制线上图片时，必须先下载到本地，而且线上图片的地址必须是在配置的安全域名下，我遇到绘制不出的原因在于：没有等待图片完全下载好就绘制了，所以这里要考虑绘图顺序，可以用image的bindload事件或者downloadTask.onProgressUpdate来监听图片加载过程。2.小程序的canvas没有裁剪的api，请问如何用canvas将图片画成圆形解决方法：这个问题我是通过制作一张和头像图片一样大的中间有个圆形镂空（中间透明）的正方形图片绘制在头像上，在视觉上给头像做出圆形的效果。3.`ctx.drawImage`绘制的画布，使用`ctx.clearRect`清除不了。解决方法：这个问题我没有解决。4.模拟器上有个bug就是在画了图片后再画文字，文字会被覆盖，但是去真机上查看是没有问题的，文字可以正常显示。解决方法：这个问题是模拟器的bug。5.为了让canvas不在页面显示，将canvas用view标签包起来后，给view设置了overflowhidden和opacity0的属性，是可以成功将canvas隐藏，但是在真机上测试时，一旦在这个隐藏的canvas上绘制图片，canvas又显示在屏幕上了。模拟器上是不会显示的。解决方法：由于canvas是原生的组件所以在模拟器上可以被隐藏，但是在真机上一直置于最上层，所以在真机上canvas一旦被绘制就一定会显示。我想了一个奇怪的方法，我在canvas的外层套了一个宽高正好一屏的view标签，然后将view的背景设置为黑色，再让canvas定位到屏幕的中间。这样看起来像是进入了图片预览。然后短暂延迟后通过wx.canvasToTempFilePath生成图片后再调wx.previewImage。同时再用wx：if把canvas给销毁，用hidden把view给隐藏，页面每次进入的时候再还原初始值。以上是我根据我自己的需求想的折中办法，有相同情况的同学可以参考。（其实我想实现的最最效果是腾讯投票生成朋友圈二维码的那种，他们的canvas就没有显示在页面上，所以我猜想他们可能是在服务器端进行渲染后再传图给前端的）6.canvas文字不能换行的问题解决方法：这个问题我是通过字符串截取的思路做的，固定每行的字数，为了美观用了ctx.setTextAlign(center)让每行字都水平居中对其。ps：希望小程序官方能统一回答下这些问题，这几个问题中有些问题一直都有很多人问，可是没有一个好的回答，希望官方能有个好的解答谢谢啦！了解更多