小游戏canvas，drawImage绘制多张图片（有重叠），

时间：2019-04-29 来源：小程序工厂

- 预期表现

微信开发者工具的表现符合预期：蓝色图片铺满屏幕，木板图片覆盖蓝色图片的部分区域

- 当前 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，扫描二维码进行预览。

经过探索后，发现：问题变成了无法指定多张有重叠的图片的覆盖顺序，详见我的评论。

微信小程序开发问题解答

微信小程序开发者回答：

这样写，倒是可以显示2张图片：（sea.jpg 92kb, wood.jpg 75kb）
GameGlobal.systemInfo = wx.getSystemInfoSync();let canvas = wx.createCanvas();let context = canvas.getContext('2d');let bgImage = wx.createImage();bgImage.src = 'images/sea.jpg';let battleImage = wx.createImage();battleImage.src ='images/wood.jpg';bgImage.onload = function () { context.drawImage(bgImage, 0, 0, systemInfo.screenWidth, 100);};battleImage.onload = function(){ context.drawImage(battleImage , 40,80, systemInfo.screenWidth * 0.6 , 100 );};无重叠的话，手机上的表现实符合预期的。
关键点：不要在image.onload里边嵌套image2.onload。
开发者工具的表现符合预期：

重叠部分，木板盖住泳池。然而，手机上的表现却是：

即使木板图片延迟drawImage，也还是这样。

本文网址：http://www.91bianli.com/weixinxiaochengxu/203.html

上一篇：微信小程序安卓端可以搜索，苹果端无法搜索

下一篇：wx.loadFontFace 使用云开发的云存储的字体，ios可以