通过以下代码加载多张图片,如果图片相互有重叠的时候,发现图片的显示顺序没有任何规律,有时候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)
}
这不是个问题,web编程经验的都知道
因为图片的load是异步的。所以到底哪张图片会先load出来说不准了。
那岂不是抓瞎
自己控制
我是个初学者,还不太懂怎么控制。望多多指教。
可以举个例子吗?谢谢!
迂回了一下,哈哈:第一次把图片仍到离屏了,反正不显示,顺序怎么乱都无所谓,后续通过事件触发的drawimage是按顺序堆叠的。
开发者工具版本:1.02.1807200.
在开发者工具和真机上都会出现这种情况。
你好,请问是只有开发者工具有这种情况吗?开发者工具是哪个版本呢?
开发者工具版本:1.02.1807200.
在开发者工具和真机上都会出现这种情况。
麻烦提供相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
清除缓存,第一次进入,图片顺序显示正常:
点击重新编译,顺序就反了:
为了测试,把文件更名后,只改变了一下图片显示大小和位置,脚本顺序不变,图片顺序却乱了:
清除缓存,第一次进入,图片顺序显示正常:
点击重新编译,顺序就反了:
为了测试,把文件更名后,只改变了一下图片显示大小和位置,脚本顺序不变,图片顺序却乱了:
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)
}
请按正确格式提供代码片段( https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html )