如何在程序 运行 之前创建多个图像并在 image.onload() 函数之外单独绘制它们？
How to create multiple images before a program is run and draw them individually outside of the image.onload() function?
我正在尝试将数百张图像绘制到 canvas 上，但仅当我引用特定图像变量时才这样做。我遇到了一个由某人创建的函数，该函数是对我正在使用的这些帖子中的另一篇做出回应的。它类似于 map = createImage("images/Global/Map.png") 并且它将 return 我能够像这样绘制的值：ctx.drawImage(map, 0, 0, 224, 292) 而不是我必须在 onload 函数中这样做。
我想我想问的是如何创建一个允许我这样做的对象？
我尝试了类似的方法：
const createImage = function(src) {
image = newImage();
image.src = src;
image.onload = function() {
return(image);
}
}
// Other code creating images...
var map = createImage("images/map.png");
// Code to draw map
ctx.drawImage(map, 0, 0, 224, 292);
提前致谢。我希望这是一个简单的问题。
我是个白痴，不应该被允许 post 这个问题。
我试图在 javascript 上使用 canvas 制作动画。
本来可以解决我的问题（虽然它一开始就不是问题）的是 window.requestAnimationFrame(function())。随着它不断地动画化，迟早会加载并绘制图像。在我看来，它似乎是即时的，因此我希望程序等到所有内容都加载完毕。
一开始就没有问题。哎呀
我正在尝试将数百张图像绘制到 canvas 上，但仅当我引用特定图像变量时才这样做。我遇到了一个由某人创建的函数，该函数是对我正在使用的这些帖子中的另一篇做出回应的。它类似于 map = createImage("images/Global/Map.png") 并且它将 return 我能够像这样绘制的值：ctx.drawImage(map, 0, 0, 224, 292) 而不是我必须在 onload 函数中这样做。
我想我想问的是如何创建一个允许我这样做的对象？
我尝试了类似的方法：
const createImage = function(src) {
image = newImage();
image.src = src;
image.onload = function() {
return(image);
}
}
// Other code creating images...
var map = createImage("images/map.png");
// Code to draw map
ctx.drawImage(map, 0, 0, 224, 292);
提前致谢。我希望这是一个简单的问题。
我是个白痴，不应该被允许 post 这个问题。 我试图在 javascript 上使用 canvas 制作动画。
本来可以解决我的问题（虽然它一开始就不是问题）的是 window.requestAnimationFrame(function())。随着它不断地动画化，迟早会加载并绘制图像。在我看来，它似乎是即时的，因此我希望程序等到所有内容都加载完毕。
一开始就没有问题。哎呀