如何检测画布何时可以进行操作？

Question

我通过jQuery动态地将X canvas元素添加到页面中，如下所示：

$(document).ready(function() { 
    for(i=0;i<4;i++) {
        var can = $(document.createElement("canvas"))
                   .attr("id","table"+i)
                   .addClass("table")
                   .attr("width",640)
                   .attr("height",480)
                   .appendTo('#container');   
    }

    //...
});

.append()和.appendTo()都没有回调，因为它们应该立即发生。不幸的是，关于canvas元素的东西不会立即发生。

当我在其中一个canvas元素上转到.getContext('2d')时，它将失败并显示“getContext不是函数”。这种情况发生在FF 3.5以及Chrome上。

如果我为像.click()这样的画布元素分配和使用任意事件处理程序，并在该事件中使用.getContext()，那么它可以很好地工作。

如何有效地确定画布是否已准备好进行操作？

Answer 1

我认为您不能在getContext()变量上使用can。

如果您这样做，请尝试can[0].getContext()。这实际上将获取元素对象，而不是jQuery的。

Answer 2

首先，我会看看是否有针对这两种浏览器的错误报告。

与此同时，你可以使用setInterval，或者只是一个循环，来检查.getContext（没有括号）是否为真，并且只在它之后继续（有一些明显的限制，所以你不要停止浏览器如果出现问题或者用户在浏览器中没有该功能，则会出现无限循环。）

Answer 3

您可以将函数附加到画布的DOMReady事件。