收藏
回答

多张图片的显示顺序问题

框架类型 问题类型 操作系统 工具版本
小游戏 Bug Windows 1.02

通过以下代码加载多张图片,如果图片相互有重叠的时候,发现图片的显示顺序没有任何规律,有时候A覆盖B,有时候B覆盖A。难道不是根据代码顺序加载的吗?

var imageA = wx.createImage()

imageA.src = './images/A.jpg'

imageA.onload = function () {

 ctx.drawImage(imageA, 0, 0, screenWidth, screenWidth)

}


var imageB = wx.createImage()

imageB.src = './images/B.jpg'

imageB.onload = function () {

 ctx.drawImage(imageB, 0, 0, screenWidth, screenWidth)

}



回答关注问题邀请回答
收藏

4 个回答

  • 等待戈多s
    等待戈多s
    2018-07-26

    这不是个问题,web编程经验的都知道

    2018-07-26
    有用
    回复
  • Galina
    Galina
    2018-07-26

    因为图片的load是异步的。所以到底哪张图片会先load出来说不准了。

    2018-07-26
    有用
    回复 4
    • 宝
      2018-07-26

      那岂不是抓瞎

      2018-07-26
      回复
    • 等待戈多s
      等待戈多s
      2018-07-26回复

      自己控制

      2018-07-26
      回复
    • 宝
      2018-07-27回复等待戈多s

      我是个初学者,还不太懂怎么控制。望多多指教。

      可以举个例子吗?谢谢!

      2018-07-27
      回复
    • 宝
      2018-07-27回复

      迂回了一下,哈哈:第一次把图片仍到离屏了,反正不显示,顺序怎么乱都无所谓,后续通过事件触发的drawimage是按顺序堆叠的。

      2018-07-27
      回复
  • 宝
    2018-07-26

    开发者工具版本:1.02.1807200.

    在开发者工具和真机上都会出现这种情况。

    2018-07-26
    有用
    回复
  • nickname
    nickname
    2018-07-26

    你好,请问是只有开发者工具有这种情况吗?开发者工具是哪个版本呢?

    2018-07-26
    有用
    回复 8
    • 宝
      2018-07-26

      开发者工具版本:1.02.1807200.

      在开发者工具和真机上都会出现这种情况。


      2018-07-26
      回复
    • nickname
      nickname
      2018-07-26回复

      麻烦提供相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      2018-07-26
      回复
    • 宝
      2018-07-26

      清除缓存,第一次进入,图片顺序显示正常:


      点击重新编译,顺序就反了:


      为了测试,把文件更名后,只改变了一下图片显示大小和位置,脚本顺序不变,图片顺序却乱了:


      2018-07-26
      回复
    • 宝
      2018-07-26回复nickname

      清除缓存,第一次进入,图片顺序显示正常:


      点击重新编译,顺序就反了:


      为了测试,把文件更名后,只改变了一下图片显示大小和位置,脚本顺序不变,图片顺序却乱了:


      import './js/libs/weapp-adapter'
       
       
      var ctx = canvas.getContext('2d')
      const screenWidth = window.innerWidth
      const screenHeight = window.innerHeight
       
      var imageBG = wx.createImage()
      imageBG.src = './images/background.jpg'
      imageBG.onload = function () {
        ctx.drawImage(imageBG, 0, 0, screenWidth, screenWidth)
      }
       
      var imageCylinder = wx.createImage()
      imageCylinder.src = './images/cylinder.jpg'
      imageCylinder.onload = function () {
        ctx.drawImage(imageCylinder, 0, 100, screenWidth, screenWidth)
      }
       
      var imageTest = wx.createImage()
      imageTest.src = './images/bg.jpg'
      imageTest.onload = function () {
        ctx.drawImage(imageTest, 0, 200, screenWidth, screenWidth)
      }


      2018-07-26
      回复
    • nickname
      nickname
      2018-07-26回复

      请按正确格式提供代码片段( https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html 

      2018-07-26
      回复
    查看更多(3)
登录 后发表内容