canvas.drawImage() 出错，画布被重复复制了 - WXOPEN Club

就是把官方 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 被重复的赶脚

6 回复

cuijing1 楼6 年前

@ 官方：小辣椒

我后来又各种调试了下，如果图片沾满全屏幕，也就是使用

ctx.drawImage(img,0,0,canvas.width,canvas.height);

那么就不会出错，当然，这不是不会出错，而是最顶上的画布把其它画布都遮住了

更坑的一点，就是在 ___img.onload() ___不绘制图片，而是绘制其它的，也会造成画布重复

所以我还以为是 __onload() 的__锅

后来发现这是想当然了

不使用 __onload() __而是使用延迟绘制

setTimeout(function(){ctx.drawImage(img,10,10,300,300);},2000);

图样图森破，还是会有刚刚的 bug…

我该怎么办？

为了解决这个问题，我采用了什么办法？

不是解决了问题，而是取巧，既然最顶上的画布会遮住其它的画布，那么很简单，就先绘制一个不透明的颜色，然后再绘制图片…

yitao2 楼6 年前

虽然没看到你图片，但我觉得我的BUG跟你一样，此问题只在客户端出现，在开发工具里正常，不知道正式环境会不会有如此奇葩的BUG.要解决这个问题，貌似只能重新把整个背景重新再渲染一遍。

jkang3 楼6 年前

humin4 楼6 年前

@小辣椒，请教下1.canvas画网络图片，模拟器可以，真机画不出来；2.canvas画出来后层级太高遮住页面了，不能调整；3.canvas画布如何销毁。谢谢

songyong5 楼6 年前

jun466 楼5 年前

wechatide://minicode/16K7xUmI64YV

代码片段地址为

wechatide://minicode/16K7xUmI64YV

另外我没法给你基准库的地址，因为 vConsole 里看不到