如何在程序运行之前创建多个图像并在 image.onload() 函数之外单独绘制它们？答案

【问题标题】：How to create multiple images before a program is run and draw them individually outside of the image.onload() function?如何在程序运行之前创建多个图像并在 image.onload() 函数之外单独绘制它们？
【发布时间】：2021-12-10 08:35:36
【问题描述】：

我试图在画布上绘制数百张图像，但仅在我引用特定图像变量时。我遇到了一个人创建的一个函数，该函数是由某人对我正在使用的另一篇帖子做出的回应。它类似于map = createImage("images/Global/Map.png")，它会返回我能够像这样绘制的值：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);

提前致谢。我希望这是一个简单的问题。

【问题讨论】：

"how would I create an object that would allow me to do this?"- 具体做什么？还有" but only when I reference the specific image variable" - 你是如何引用这个图像变量的？目前还不是特别清楚 - 请提供足够的 HTML 和 Javascript 来正确说明问题
@ProfessorAbronsius HTML 将无关紧要，因为我没有在画布之外的 HTML 代码中创建任何元素。对图像变量的引用特别是为保存图像“地图”信息而创建的 var 的名称

标签： javascript html canvas

【解决方案1】：

我是个白痴，不应该被允许发布这个问题。我试图在 javascript 上使用画布制作动画。

window.requestAnimationFrame(function()) 可以解决我的问题（虽然从一开始就不是问题）。随着它不断动画化，迟早会加载并绘制图像。在我看来，它似乎是即时的，因此我希望程序等到所有内容都加载完毕。

从一开始就没有问题。哎呀。

【讨论】：