基于Windows 8 html5画布的应用程序中的奇怪行为

Question

我正在开发一个Windows 8 JavaScript应用程序。

我尝试在画布中加载图片但是当我使用CTRL + F5直接运行应用程序时，应用程序会运行，但画布上没有图像。

当我调试应用程序时没有设置断点并且应用程序直接打开但仍然没有图像。

当我调试应用程序并放置breakpoint然后在图像生成代码完成后逐步运行代码时，通过单击调试符号继续调试，现在图像显示在画布中。我不知道这里发生了什么，为什么它只在调试时用断点显示图像。为什么在没有调试的情况下正常运行时没有显示图像？

这是图像生成的代码。

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-index更大，所以应该没有问题。是什么导致了这个问题？

Answer 1

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