就是把官方 demo 中的 game.js 内容替换成
var c = wx.createCanvas();var ctx = c.getContext('2d');var img = wx.createImage();img.onload = function () { ctx.drawImage(this, 0, 0); ctx.fillStyle="#000"; ctx.fillRect(100,100,100,100);}img.src = "images/bg.jpg"; |
在所有 Android 手机上变成了下图，看底部，很明显 canvas 被重复的赶脚
虽然没看到你图片，但我觉得我的BUG跟你一样，此问题只在客户端出现，在开发工具里正常，不知道正式环境会不会有如此奇葩的BUG.要解决这个问题，貌似只能重新把整个背景重新再渲染一遍。
https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000a024809c5185c76d674ce558c00&token=125418695&lang=zh_CN
@ 官方：小辣椒
我后来又各种调试了下，如果图片沾满全屏幕，也就是使用
ctx.drawImage(img,0,0,canvas.width,canvas.height);那么就不会出错，当然，这不是不会出错，而是最顶上的画布把其它画布都遮住了
更坑的一点，就是在 img.onload() 不绘制图片，而是绘制其它的， 也会造成画布重复
所以我还以为是 onload() 的锅
后来发现这是想当然了
不使用 onload() 而是使用延迟绘制
setTimeout(function(){ctx.drawImage(img,10,10,300,300);},2000);图样图森破，还是会有刚刚的 bug.....
我该怎么办？
为了解决这个问题，我采用了什么办法？
不是解决了问题，而是取巧，既然最顶上的画布会遮住其它的画布，那么很简单，就先绘制一个不透明的颜色，然后再绘制图片...
如果一开始就绘上去也没有问题，如果是后期重绘，就会出现这个BUG，必须把背景什么的都重新绘制一遍才行，腾讯技术真是坑爹。
@木头 看这个帖子 （ https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html ) 分享你的代码，我帮你看看
@小辣椒，请教下1.canvas画网络图片，模拟器可以，真机画不出来；2.canvas画出来后层级太高遮住页面了，不能调整；3.canvas画布如何销毁。谢谢
wechatide://minicode/16K7xUmI64YV
代码片段地址为
wechatide://minicode/16K7xUmI64YV
另外我没法给你基准库的地址，因为 vConsole 里看不到
麻烦给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题