canvas getcontext ("2d") renvoie null
J'ai essayé ceci de différentes manières, mais je reste coincé avec la même erreur. J'ai déjà chargé une image sur canvas, mais depuis que J'ai mis à jour Safari Il y a quelques jours, j'ai des erreurs.
Je vais poster ce que j'ai en ce moment, mais j'ai essayé de le faire avec jQuery, la propriété onload de html, etc.
var cvs, ctx, img;
function init() {
cvs = document.getElementById("profilecanvas");
ctx = cvs.getContext("2d"); /* Error in getContext("2d") */
img = document.getElementById("profileImg");
drawImg();
}
function drawImg() {
ctx.drawImage(img, 0, 0);
}
window.onload = init();
Les identifiants sont corrects et correspondent aux balises canvas et img appropriées. Cependant, je continue à obtenir TypeError: 'null' is not an object (evaluating 'cvs.getContext') et cela ne semble pas aller plus loin. Je suis sûr que c'est certains Erreur ID10T, mais j'espère que quelqu'un peut me donner une idée de ce qui cause cela? Merci.
Modifier:
Ok, donc cela semble fonctionner en utilisant <body onload="init()"> maintenant. Cependant, il ne s'affiche qu'occasionnellement, et si j'essaie d'exécuter {[3] } hors de $(document).ready() ou document.onload Je n'ai toujours pas de chance, et reçois l'erreur. Toutes les pensées?
4 réponses
Lorsque vous faites ceci:
window.onload = init();
La fonction {[2] } sera exécutée immédiatement (ce qui provoque l'erreur, car getContext() est appelé trop tôt, c'est-à-dire avant le chargement du DOM), et la valeur de retour de init() sera stockée dans window.onload.
Donc, vous voulez réellement faire ceci:
window.onload = init;
Notez le () manquant.
Pour les autres qui ont frappé cette page lors de la recherche de getContext renvoyer null, cela peut arriver si vous avez déjà demandé un type de contexte différent.
Par exemple:
var canvas = ...;
var ctx2d = canvas.getContext('2d');
var ctx3d = canvas.getContext('webgl'); // will always be null
La même chose est également vraie si vous inversez l'ordre des appels.
Cela n'a rien à voir avec la question réelle, mais puisque cette question Est le premier résultat lors de googler getContex("2d") null j'ajoute la solution au problème que j'avais:
Assurez - vous d'utiliser getContext("2d") et non getContext("2D")-notez les minuscules d.
Il suffit de mettre votre JavaScript à la fin de la page ... mettre fin à vos problèmes... j'ai tout essayé mais c'est la solution la plus logique et la plus simple.. comme cela, JS ne fonctionnera qu'après le chargement de l'autre partie(c'est-à-dire la page supérieure).. j'espère que cette aide