我正在使用 Canvas 为我的游戏实现一个菜单系统(出于某些性能原因，我无法使用 HTML/CSS 制作菜单)。我使用 JSON 配置了菜单，并且 menuComponent 对象是使用它们各自的属性(x、y、宽度、高度、imagePath 等)创建的。我有一个菜单加载器，它然后遍历组件对象并调用 componentObjects 的绘制方法(当然，所有图像都等待它们的 onload 事件首先触发)。
无论如何，我希望我的图像按照调用绘制方法的顺序绘制，以便它们以正确的顺序重叠。大多数时候这种行为是正确的，但偶尔他们会以错误的顺序绘制。
我的问题是 - 我可以相信 Canvas 会按照为这些图像调用 drawMethod 的顺序绘制图像吗？假设我有图像 A，例如 10MB，图像 B 为 10kb。如果我调用绘制图像 A 并然后绘制图像 B，那么图像 B 是否有可能首先加载，因为它是一个较小的图像？
我试图让我的代码变得聪明(在我的组件对象中嵌套组件并递归调用绘制方法)所以我的代码中可能存在一些竞争条件，我只是想确认上述行为是正确的。如果我添加逻辑以强制我的对象等待直到设置了 ready 标志，那么它似乎可以工作。但不幸的是，这会减慢我的菜单加载时间。
最佳答案
正式回答这个帖子-
最后，我简化了我的解决方案，使用一个 menuLoader 对象，该对象具有一组要绘制的每个图像的哈希值(包含 x、y、imagePath、就绪标志)。我调用了一个创建组件的方法，该方法构建了这些散列，默认情况下 ready 标志设置为 false。我为每个图像设置了一个 onload 事件，以将其各自的就绪标志设置为 true。
创建组件完成执行后，我使用 setInterval 旋转，直到所有标志都设置为 true。满足此条件后，我再次遍历我的哈希数组并为每个图像调用 draw 方法。
关于javascript - Canvas 的 drawImage 方法真的是同步的吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19329803/