4

我发现了关于 IE 9 和在 stackoverflow 上讨论的将图像绘制到 HTML5 cnavases 的类似时间问题，但没有一个与我的完全匹配。

我遇到了一个问题，即定期调用图像的 onload 函数，但它还没有准备好被绘制到画布上。（画布保持空白）。在 onload 中，图像的“完整”属性始终为真，“宽度”和“高度”属性始终包含预期值。不抛出异常。如果我在将图像绘制到画布之前稍微延迟 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";
4

1 回答 1

0

我看不到您将画布附加到身体的哪个位置——这是故意的吗？

不管怎样，试着把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";
于 2013-04-25T19:17:56.533 回答