Javascript 是画布'；drawImage方法是否真正同步？
我正在使用canvas为我的游戏实现一个菜单系统（出于某些性能原因，我无法使用HTML/CSS制作菜单）。我使用JSON配置了菜单，menuComponent对象是用它们各自的属性（x、y、width、height、imagePath等）创建的。我有一个菜单加载器，然后它迭代组件对象并调用组件对象的draw方法（当然，所有图像都等待其onload事件首先触发） 无论如何，我希望我的图像按照调用其绘制方法的顺序绘制，以便它们以正确的顺序重叠。大多数情况下，这种行为是正确的，但偶尔会以错误的顺序绘制 我的问题是-我能相信Canvas按照为这些图像调用drawMethod的顺序来绘制图像吗？假设我有一个图像A，例如10MB，图像B是10kb。如果我调用draw image A，然后再调用draw image B，那么是否有可能会因为图像较小而首先加载图像BJavascript 是画布'；drawImage方法是否真正同步？,javascript,html,canvas,drawimage,Javascript,Html,Canvas,Drawimage,我正在使用canvas为我的游戏实现一个菜单系统（出于某些性能原因，我无法使用HTML/CSS制作菜单）。我使用JSON配置了菜单，menuComponent对象是用它们各自的属性（x、y、width、height、imagePath等）创建的。我有一个菜单加载器，然后它迭代组件对象并调用组件对象的draw方法（当然，所有图像都等待其onload事件首先触发） 无论如何，我希望我的图像按照调用其绘制方法的顺序绘制，以便它们以正确的顺序重叠。大多数情况下，这种行为是正确的，但偶尔会以错误的顺序绘制
我试图巧妙地使用我的代码（在我的组件对象中有嵌套的组件，递归地调用draw方法），所以我的代码中可能存在一些竞争条件，我只想确认上述行为是正确的。如果我添加逻辑来强制对象等待，直到设置就绪标志，那么它似乎可以工作。但不幸的是，这会拖慢我的菜单加载时间。对这篇文章给出一个正式的回答- 最后，我简化了我的解决方案，使用了一个menuLoader对象，该对象为每个要绘制的图像（包含x、y、imagePath、ready标志）提供了一个哈希数组。我调用一个createcomponents方法，该方法使用默认设置为false的ready标志构建这些散列。我为每个图像设置了一个onload事件，以将其各自的就绪标志设置为true
在createcomponents完成执行后，我使用setInterval旋转，直到所有标志都设置为true。一旦满足了这个条件，我就再次迭代我的哈希数组，并为每个图像调用draw方法。伙计，我也遇到过同样的问题，并且已经被困了大约三天了。我想到了一件事。请仔细阅读这段代码片段，并向我提供您的想法
final ResourceManager rm = new ResourceManager(1000, 1000);
rm.loadImgResource(LandCardResources.INSTANCE.getMeadow(), "meadow", 0, 0);
rm.loadImgResource(LandCardResources.INSTANCE.getHellHorseKnight(), "knight", 150, 150);
canvas.setWidth(500 + "px");
canvas.setHeight(500 + "px");
canvas.setCoordinateSpaceWidth(500);
canvas.setCoordinateSpaceHeight(500);
RootPanel.get().add(canvas);
rm.drawImageFromMetaDb(ctx, 0, 0, 100, 100, 0, 0, 100, 100);
rm.drawImageFromMetaDb(ctx, 150, 150, 100, 100, 50, 50, 100, 100);
而且它从来都不起作用。但如果我使用负责rm.drawImage的处理程序将按钮添加到根面板。。。。。单击此按钮时，它将完美工作。无法真正理解为什么会发生这种情况，因为backBufferCanvas是在mainCanvas之前连接的，所以逻辑必须已经延迟。drawImage是，但加载图像不是（同步）。简单的回答是：是的，画布是同步的。“
如果我添加逻辑来强制我的对象等待就绪标志设置，那么它似乎可以工作。