Comment détecter quand une toile est prête à être manipulée?

Question

J'ajoute de manière dynamique des éléments de la toile X à une page via jQuery, comme suit:

$(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');   
    }

    //...
});

Ni .append () ni .appendTo () n'ont de rappel, car ils sont censés se produire immédiatement. Malheureusement, quelque chose à propos de l'élément canvas ne se produit pas immédiatement.

Lorsque je vais sur .getContext ('2d') sur l'un des éléments de la toile, il échouera avec "getContext n'est pas une fonction". Cela se produit sur FF 3.5 ainsi que sur Chrome.

Si j'assigne un gestionnaire d'événements arbitraire aux éléments de la toile, tel que .click () , et que j'utilise .getContext () dans cet événement, cela fonctionnera parfaitement.

Comment puis-je déterminer efficacement qu'une toile est prête à être manipulée?

Answer 1

Je ne pense pas que vous puissiez utiliser getContext () sur la variable can .

Si vous faites cela, essayez can [0] .getContext () . Ce sera effectivement l'objet élément, pas celui de jQuery.

Answer 2

D'abord, je verrais s'il y a un rapport de bogue à ce sujet pour l'un ou l'autre navigateur.

Pendant ce temps, vous pouvez utiliser setInterval, ou peut-être juste une boucle, pour vérifier si .getContext (sans crochets) est vrai, et continuer seulement après (avec une limite raisonnable afin de ne pas bloquer le navigateur boucle infinie si quelque chose ne va pas ou si l'utilisateur n'a pas cette fonctionnalité dans son navigateur.)

Answer 3

Vous pouvez associer une fonction à l'événement DOMReady du canevas.