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

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

我认为你不能在 can 变量上使用 getContext（）。

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

Answer 2

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

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

Answer 3

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