web-dev-qa-db-fra.com

getContext n'est pas une fonction

Je travaille sur la création d'une application Web de base à l'aide de canevas qui modifie dynamiquement la taille du canevas lorsque la fenêtre se redimensionne. Je l'ai fait fonctionner statiquement sans aucun défaut mais quand je crée un objet pour le faire dynamiquement il lance une erreur

dans chrome l'erreur est:

TypeError non récupéré: l'objet [objet objet] n'a pas de méthode 'getContext'

et dans firefox c'est:

this.element.getContext n'est pas une fonction

J'ai cherché sur le Web et cela semble être un problème commun, mais aucun des correctifs mentionnés ne fait de différence.

Le code en question est le suivant:

layer['background'] = new canvasLayer("body","background");
function canvasLayer(location,id){
    $(location).append("<canvas id='"+id+"'>unsupported browser</canvas>");
    this.element=$(id);
    this.context = this.element.getContext("2d"); //this is the line that throws the error
    this.width=$(window).width(); //change the canvas size
    this.height=$(window).height();
    $(id).width($(window).width()); //change the canvas tag size to maintain proper scale
    $(id).height($(window).height());
}

Merci d'avance.

javascriptjqueryhtml5canvas
41
devnill

Votre valeur:

this.element = $(id);

est un objet jQuery, pas un pur élément Canvas.

Pour le retourner afin que vous puissiez appeler getContext(), appeler this.element.get(0), ou mieux stocker l'élément réel et non l'objet jQuery:

function canvasLayer(location, id) {

    this.width = $(window).width();
    this.height = $(window).height();
    this.element = document.createElement('canvas');

    $(this.element)
       .attr('id', id)
       .text('unsupported browser')
       .width(this.width)
       .height(this.height)
       .appendTo(location);

    this.context = this.element.getContext("2d");
}

Voir le code en cours d'exécution sur http://jsfiddle.net/alnitak/zbaMh/ , en utilisant idéalement la console Chrome Javascript afin que vous puissiez voir l'objet résultant dans la sortie de débogage .

64
Alnitak

Vous pouvez également utiliser:

this.element=$(id)[0];
30
UpTheCreek

J'ai eu la même erreur car j'avais accidentellement utilisé <div> au lieu de <canvas> comme élément sur lequel j'essaie d'appeler getContext.

24
jbasko