Canvas 的 drawImage 方法真的是同步的吗？

Question

我正在使用画布为我的游戏实现菜单系统（出于某些性能原因，我无法使用 HTML/CSS 来制作菜单）。我使用 JSON 配置了菜单，menuComponent 对象是使用它们各自的属性（x、y、宽度、高度、imagePath 等）创建的。我有一个菜单加载器，然后它遍历组件对象并调用 componentObjects 的 draw 方法（当然，所有图像都等待它们的 onload 事件首先触发）。

无论如何，我希望我的图像按照调用它们的 draw 方法的顺序绘制，以便它们以正确的顺序重叠。大多数时候这种行为是正确的，但偶尔他们会以错误的顺序绘制。

我的问题是 - 我可以相信 Canvas 按照为这些图像调用 drawMethod 的顺序绘制图像吗？假设我有图像 A，例如 10MB，图像 B 是 10kb。如果我调用绘制图像 A然后绘制图像 B ，那么图像 B 是否有可能首先加载，因为它是一个较小的图像？

我试图让我的代码变得聪明（在我的组件对象中嵌套了组件并递归调用 draw 方法），所以我的代码中可能存在一些竞争条件，我只想确认上述行为是正确的。如果我添加逻辑来强制我的对象等待设置就绪标志，那么它似乎可以工作。但不幸的是，这会减慢我的菜单加载时间。

Answer 1

对这篇文章做出正式答复 -

最后，我简化了我的解决方案，使用一个 menuLoader 对象，该对象具有一组要绘制的每个图像的哈希值（包含 x、y、imagePath、就绪标志）。我调用一个创建组件方法，该方法构建这些哈希值，并且默认情况下将就绪标志设置为 false。我为每个图像设置了一个onload事件，以将其各自的就绪标志设置为 true。

创建组件完成执行后，我使用 setInterval 进行旋转，直到所有标志都设置为 true。一旦满足这个条件，我就会再次迭代哈希数组并为每个图像调用绘制方法。