公告列表
公告列表
收藏
回答

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

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小游戏 Bug Android EMUI 5.1 ( Android 7.0 ) 华为 Honor V9 Play 7.0.0

- 预期表现

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



- 当前 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);
};

- 复现路径

  1. 新建目录test。

  2. 新建目录test/images。

  3. test/images放入jpg格式的图片，更名为sea.jpg、wood.jpg。图片大小 < 200kB。

  4. 新建test/game.js， 放入以上js代码。新建test/game.json， 写入：

  5. {
        "deviceOrientation": "portrait"
    }

  6. 打开微信开发者工具，点击“编译”，运行test项目。

  7. 微信开发者工具，点击“预览”，手机打开安卓（Android 7）版微信7.0.0，扫描二维码进行预览。


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

最后一次编辑于  2019-01-13
回答关注问题邀请回答
收藏

5 个回答

  • 慢捻抹复挑
    慢捻抹复挑
    2023-08-22

    我也是这个问题, 小程序真是垃圾啊

    2023-08-22
    有用 1
    回复
  • 向洋花开
    向洋花开
    2024-10-16

    promise.all()为啥在真机里不行呢？

    2024-10-16
    有用
    回复
  • 学习使我快乐
    学习使我快乐
    2019-11-09

    请问，这个问题您现在解决了么，请问怎么解决的

    2019-11-09
    有用
    回复
  • skybosi
    skybosi
    2019-04-21

    运用 Promise.all 完美解决问题，示例代码如下：

    var imgPool = [
        {
            "id": "ByeD9rlryj0z69h9XWE4oiRa",
            "index": 0,
            "imgSrc": "images/home/Home_bg.png",
            "x": 0,
            "y": 0,
            "width": 320,
            "height": 568
        },
        {
            "id": "fM0BsD5g3f6IyM71ZYqwfEFX",
            "index": 1,
            "imgSrc": "images/home/Home_setting.png",
            "x": 13.235,
            "y": 20.535999999999998,
            "width": 55.3,
            "height": 54.599999999999994
        },
        {
            "id": "EE4YMeHyyOslDFnaKYfmXO5f",
            "index": 2,
            "imgSrc": "images/home/Home_btn1.png",
            "x": 78.4,
            "y": 328.23,
            "width": 163.2,
            "height": 47
        }
    ]
     
     
     
    // canvas 上下文
     
    var ctx = canvas.getContext('2d')
     
    var promise_list = []
     
     
     
    imgPool.forEach((item) => {
      // 将加载好的图片加入Promise中
      promise_list.push(
        new Promise((resolve, reject) => {
          item.img = new Image()
          item.img.src = item.imgSrc
          item.img.onload = function() {
            resolve(item)
          }
          item.img.click = function(e) {
            console.log(e)
          }
        })
      )
    })
    // 详见 http://es6.ruanyifeng.com/#docs/promise#Promise-all
    Promise.all(promise_list).then(function(results) {
      results.forEach((item) => {
        ctx.drawImage(
          item.img,
          item.x,
          item.y,
          item.width,
          item.height
        )
      })
    }).catch(function(reason) {
      console.log(reason)
    });



       

    2019-04-21
    有用
    回复
  • 飞飞小坏蛋
    飞飞小坏蛋
    2019-01-13

    这样写，倒是可以显示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，也还是这样。

    2019-01-13
    有用
    回复
请 登录 后发表内容
相关文档