小游戏canvas,drawImage绘制多张图片(有重叠),只能显示一张
- 预期表现 微信开发者工具的表现符合预期:蓝色图片铺满屏幕,木板图片覆盖蓝色图片的部分区域 [图片] - 当前 Bug 的表现(附上截图) 手机上是这样的。。。 [图片] 运行我提供的代码,先出现全屏的蓝色图片,2秒后,蓝色图片不见了。。。只出现木板图片。 - 提供一个最简复现 Demo GameGlobal.systemInfo = wx.getSystemInfoSync(); let canvas = wx.createCanvas(); let context = canvas.getContext('2d'); let bgImage = wx.createImage(); bgImage.src = 'images/sea.jpg'; bgImage.onload = function () { context.drawImage(bgImage, 0, 0, systemInfo.screenWidth, systemInfo.screenHeight); setTimeout(function() { let battleImage = wx.createImage(); battleImage.src ='images/wood.jpg'; battleImage.onload = function() { context.drawImage(battleImage , 50,50, systemInfo.screenWidth * 0.2 , systemInfo.screenHeight * 0.2 ); }; },2000); }; - 复现路径 新建目录test。 新建目录test/images。 test/images放入jpg格式的图片,更名为sea.jpg、wood.jpg。图片大小 < 200kB。 新建test/game.js, 放入以上js代码。新建test/game.json, 写入: { "deviceOrientation": "portrait" }打开微信开发者工具,点击“编译”,运行test项目。 微信开发者工具,点击“预览”,手机打开安卓(Android 7)版微信7.0.0,扫描二维码进行预览。 经过探索后,发现:问题变成了无法指定多张有重叠的图片的覆盖顺序,详见我的评论。