1

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

4

1 回答 1

1

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

于 2012-12-09T19:35:36.330 回答