Debugging 基于Windows8 html5画布的应用程序中的奇怪行为

我正在开发一个Windows8JavaScript应用程序

我尝试在画布中加载图像，但当我直接使用

CTRL+F5

运行应用程序时，应用程序会运行，但画布上没有图像

当我调试应用程序时，没有放置断点，应用程序直接打开，但仍然没有图像

当我调试应用程序并放置一个

断点时

然后逐步运行代码当生成图像的代码完成后，我通过单击调试标志继续调试，现在图像显示在画布中。我不知道这里发生了什么，为什么它只在带有断点的调试时显示图像。为什么在没有调试的情况下正常运行时它不显示图像

下面是生成图像的代码

Init: function (canvas,ctx) {

    this.ghostCanvas = canvas;
    this.ghostCanvasCtx = ctx;

    var banner = new Image();
    banner.src = "images/banner.jpg";

    ctx.drawImage(banner, 100, 100);
}

---

当我放置一个断点并逐行运行它时，这段代码可以工作。另外，我使用了两张画布，一张在另一张上面。但是这个画布的z索引更大，所以应该没有问题。造成此问题的原因是什么？

在画布上绘制图像之前，需要等待图像加载。在图像对象上为“加载”事件添加事件处理程序，当调用该事件时，则在画布中绘制图像。

在画布上绘制图像之前，需要等待图像加载。在图像对象上为“加载”事件添加一个事件处理程序，当该事件被调用时，则在画布中绘制图像