impossible d'accéder au canevas html5?

Je suis en train de tomber sur un problème étrange: le code ne pourra pas accéder à l'élément canvas. Considérez ce code:impossible d'accéder au canevas html5?

this.canvas = document.getElementById('canvas'); 
this.context2D = this.canvas.getContext('2d');

Firefox produirait une erreur this.canvas is null dire. Mais si je l'écris comme ceci:

this.canvas = $('#canvas'); 
this.context2D = this.canvas.getContext('2d');

Firefox dirait getContext is not a method. J'ai regardé dans this.canvas et voir un objet inconnu (aucune idée d'où il vient mais certainement pas une toile).

Et ce n'est pas exclusif à Firefox, Chrome produire le même résultat. Je deviens fou de ça.

modifier: le code html entier est ici

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <title>Background test</title> 
    <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="Scripts/soundmanager2.js"></script> 
    <script type="text/javascript" src="Scripts/base.js"></script> 
    <script type="text/javascript" src="Scripts/Resources.js"></script> 
    <script type="text/javascript" src="Scripts/Actor.js"></script> 
    <script type="text/javascript" src="Scripts/Commons.js"></script> 
    <script type="text/javascript" src="Scripts/Graphics.js"></script> 
    <script type="text/javascript" src="Scripts/Utils.js"></script> 
    <script type="text/javascript"> 
     window.onload = function(){ 
      new Commons().startupCommons(); 
      new Graphics().startupGraphics(); 
     } 
    </script> 
    <style type="text/css"> 
     body { font-family: Arial,Helvetica,sans-serif;} 
     canvas {border-style:solid; border-width:5px; border-color:green;} 
    </style> 
</head> 
<body> 
    <canvas id="visualcanvas" width="800" height="600"> 
     <p> 
      Your browser does not support the canvas element. 
     </p> 
    </canvas> 
</body> 
</html>

Je viens d'ajouter window.onload, mais le problème persiste. this dans le code avant se référer à l'objet Graphics, qui est appel lorsque window.onload feu.

Source

2010-08-20 Khoi

Pouvons-nous voir du HTML? –

Qu'est-ce que c'est? - –

ne sais pas où puis-je télécharger du code? – Khoi

Qu'est-ce que c'est? Est-ce Prototype.js? Je vais supposer que c'est jQuery.

Si vous appelez jQuery(someselector), vous obtiendrez un objet jQuery. Si aucun élément ne correspond au sélecteur, il s'agira d'un objet jQuery sans élément.

De toute façon, vous ne pouvez pas le traiter comme un objet canvas.

Le premier ensemble de code ne fonctionne probablement pas, car il n'y a aucun élément avec l'ID 'canvas' dans le DOM au moment où la ligne de JS est exécutée. Ceci est probablement dû au fait que vous exécutez le JS dans un élément de script qui apparaît avant l'élément avec l'ID 'canvas' (et n'a rien fait pour retarder l'exécution, comme l'appeler via l'événement document ready) ou parce que vous êtes confusion de l'attribut id et du nom de l'étiquette.

Source

2010-08-20 12:59:12 Quentin

La première partie est définitivement vraie. La deuxième partie est probablement vraie. –

J'ai l'élément canvas à l'intérieur du html. En fait, cela fonctionne parfaitement avant. Mais après avoir fait quelques modifications au javascript, ça commence à se comporter bizarrement, je n'ai pas changé le html, l'élément est toujours là. – Khoi

L'élément a l'identifiant 'visualcanvas' vous recherchez un élément avec l'identifiant 'canvas'. Comme je l'ai dit dans la question «vous confondez l'attribut id et le nom de l'étiquette» (ou vous nous montrez un code qui ne correspond pas à ce que vous écrivez réellement) – Quentin

impossible d'accéder au canevas html5?

Répondre

Questions connexes