Question

我发现有关IE 9的类似计时问题，并将图像绘制到stackoverflow上讨论的HTML5 cnavases，但没有一个与我的匹配。

我遇到了一个问题，即定期调用图像的onload函数，但它仍未准备好被绘制到画布上。（画布保持空白）。在onload中，图像的“完整”属性始终为true，“width”和“height”属性始终包含预期值。没有异常被抛出。如果我在将图像绘制到画布之前在onload上放了一点延迟，我就不会得到空白画。我还可以再次尝试将图像绘制为像鼠标点击这样的事件，这总是成功的。我在Chrome或Firefox中没有注意到这一点。我很欣赏任何见解。谢谢！

var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;

var context = canvas.getContext("2d");

var image = new Image();

image.onload = function()
{   
    // this.complete always true here
    // A delay here seems to guarantee the draw will succeed
    context.drawImage(this, 0, 0);  // Half the time canvas remains blank after draw
    // If the canvas is still blank, a later call to context.drawImage with this image will succeed

}

image.src = "some.png";

Answer 1

我看不到你将画布贴在身上的位置 - 这是故意的吗？

无论如何，请尝试将createElement放在onload

中

这是否能使事情始终如一？

    var canvas;
    var context;

    var image = new Image();

    image.onload = function()
    { 
        canvas = document.createElement('canvas');
        canvas.width = 640;
        canvas.height = 480;
        document.body.appendChild(canvas);
        context = canvas.getContext("2d");

        context.drawImage(this, 0, 0);  // Half the time canvas remains blank after draw
    }
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/city-q-c-640-480-6.jpg";

Internet Explorer 9中的HTML5 Image.onload竞争条件

1 个答案: