小游戏canvas，drawImage绘制多张图片（有重叠），只能显示一张

微信公开课小程序热门讨论关于「小游戏canvas，drawImage绘制多张图片（有重叠），只能显示一张」的小程序开发问题
补充:预期表现微信开发者工具的表现符合预期蓝色图片铺满屏幕，木板图片覆盖蓝色图片的部分区域当前Bug的表现（附上截图）手机上是这样的运行我提供的代码，先出现全屏的蓝色图片，2秒后，蓝色图片不见了
展开:预期表现微信开发者工具的表现符合预期：蓝色图片铺满屏幕，木板图片覆盖蓝色图片的部分区域当前Bug的表现（附上截图）手机上是这样的运行我提供的代码，先出现全屏的蓝色图片，2秒后，蓝色图片不见了只出现木板图片提供一个最简复现DemoGameGlobalsystemInfo=wxgetSystemInfoSync();letcanvas=wxcreateCanvas();letcontext=canvasgetContext(2d);letbgImage=wxcreateImage();bgImagesrc=imagesseajpg;bgImageonload=function(){   contextdrawImage(bgImage,0,0,systemInfoscreenWidth,systemInfoscreenHeight);   setTimeout(function()   {       letbattleImage=wxcreateImage();       battleImagesrc=imageswoodjpg;       battleImageonload=function()       {           contextdrawImage(battleImage,50,50,               systemInfoscreenWidth*02, systemInfoscreenHeight*02     );       };   },2000);};复现路径新建目录test新建目录testimagestestimages放入jpg格式的图片，更名为seajpg、woodjpg图片大小<200kB新建testgamejs，放入以上js代码新建testgamejson，写入：{   deviceOrientation:portrait}打开微信开发者工具，点击“编译”，运行test项目微信开发者工具，点击“预览”，手机打开安卓（Android7）版微信700，扫描二维码进行预览经过探索后，发现：问题变成了无法指定多张有重叠的图片的覆盖顺序，详见我的评论即速小程序：这样写，倒是可以显示2张图片：（seajpg92kb,woodjpg75kb）GameGlobalsystemInfo=wxgetSystemInfoSync();letcanvas=wxcreateCanvas();letcontext=canvasgetContext(2d);letbgImage=wxcreateImage();bgImagesrc=imagesseajpg;letbattleImage=wxcreateImage();battleImagesrc=imageswoodjpg;bgImageonload=function(){   contextdrawImage(bgImage,0,0,       systemInfoscreenWidth,100);};battleImageonload=function(){   contextdrawImage(battleImage,40,80,       systemInfoscreenWidth*06, 100 );};无重叠的话，手机上的表现实符合预期的关键点：不要在imageonload里边嵌套image2onload开发者工具的表现符合预期：重叠部分，木板盖住泳池然而，手机上的表现却是：即使木板图片延迟drawImage，也还是这样
更多有关「小游戏canvas，drawImage绘制多张图片（有重叠），只能显示一张」的讨论可以前往微信公开课小程序参与互动哦！了解更多