我需要在 canvas
中包含多个图像。我想通过 for-loop
动态加载它们。
我尝试了很多,但最好的情况是只显示最后一张图片。我检查这个tread但我仍然只得到最后一张图片。
为了解释,这是我最新的代码(基本上是另一篇文章中的代码):
for (var i = 0; i <= max; i++)
{
thisWidth = 250;
thisHeight = 0;
imgSrc = "photo_"+i+".jpg";
letterImg = new Image();
letterImg.onload = function() {
context.drawImage(letterImg,thisWidth*i,thisHeight);
}
letterImg.src = imgSrc;
}
有什么想法吗?
最佳答案
问题是 onload
事件是异步发生的,到那时循环变量已经是最后一个值了。
您可以使用闭包来修复它:
for (var i = 0; i <= max; i++)
{
thisWidth = 250;
thisHeight = 0;
(function(j){
var imgSrc = "photo_"+j+".jpg";
var letterImg = new Image();
letterImg.onload = function() {
context.drawImage(letterImg,thisWidth*j,thisHeight);
}
letterImg.src = imgSrc;
})(i);
}
关于javascript - HTML 5 Canvas - 在 Canvas 中动态包含多个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12605072/