mon code HTML5 ne fonctionne pas

J'ai écrit le code HTML5 suivant avec JavaScript, qui est exactement un exemple de HTML5 Canvas, mais il ne fonctionne pas dans mes navigateurs. J'ai essayé Safari, Firefox et Opera. J'ai cherché des erreurs plusieurs fois et j'ai corrigé quelques petites erreurs, mais cela ne fonctionne pas encore.mon code HTML5 ne fonctionne pas

Veuillez le vérifier et laissez-moi savoir ce que l'erreur peut être.

<!doctype html> 
<html lang="en"> 
<head> 
    <title>test</title> 
    <script src = "modernizr-1.6.min.js"></script> 
    <script type="text/javascript"> 
     window.addEventListener("load", eventWindowLoaded, false); 
     var Debugger = function() {}; 
     Debugger.log = function(message){ 
      try{ 
       console.log(message); 
      } catch (exception){ 
       return; 
      } 
     } 
     function eventWindowLoaded(){ 
      canvasApp(); 
     } 
     function canvasSupport(){ 
      return Modernizr.canvas; 
     } 
     function canvasApp(){ 
      if (!convasSupport()){ 
       return; 
      } 
      var theCanvas = document.getElementById("canone"); 
      var context = theCanvas.getContext("2d") 

      Debugger.log("Nooooooooooooooooo"); 

      function drawScreen(){ 

       //background 
       context.fillStyle="#ffffaa"; 
       context.fillRect=(0,0,500,500); 

       //text 
       context.fillStyle="#000000"; 
       context.font="20px_sans"; 
       context.textBaseline="top"; 
       context.fillText("hello world", 250, 100); 

       //image 
       var image = new Image(); 
       image.src = "lund.jpg"; 
       image.onload = function(){ 
        context.drawImage(image, 160, 130); 
       } 

       //box 
       context.strokeStyle = "#000000"; 
       context.strokeRect(20, 50, 490, 290); 
      } 
     drawScreen(); 
     } 
    </script> 
</head> 
<body> 
<div style="position:absolut;top:50px;left:50px;"> 
    <canvas id="canone" width ="500" height ="300"> 
     your browser does not support html5 
    </canvas> 
</div> 
</body> 
</html>

Source

2012-11-08 msc87

Vous devriez être plus précis sur ce qui ne fonctionne pas. Vérifiez-vous la console pour les erreurs? – woz

Que signifie "ne fonctionne pas"? Quelles erreurs obtenez-vous? – j08691

Je suis nouveau en HTML et en utilisant Notpad ++. Je ne sais pas comment déboguer mon code dans ça. – msc87

Je fait essai, et faute d'orthographe canvasSupport est en effet le problème.

Que voulez-vous dire par "J'ai cherché des erreurs plusieurs fois?" Vous devez charger votre console d'erreur JavaScript (ctrl-shift-J sur Chrome ou Firefox) pour voir ce qui y est imprimé; les fonctions qui ne sont pas définies (parce que vous mettez un mauvais nom) sont assez faciles à déboguer à ce moment-là.

Source

2012-11-08 15:40:45 jfmatt

Uncaught ReferenceError: convasSupport is not defined

Vous devez ouvrir la fenêtre de développeur lors du débogage et de regarder les erreurs présentes.

Vous avez une faute de frappe. Cela devrait être canvasSupport, pas convasSupport.

Faites une recherche pour déboguer JavaScript dans votre navigateur préféré. Il y a beaucoup d'outils intégrés qui vous aideront à découvrir des bugs comme celui-ci instantanément.

Source

2012-11-08 15:34:45

Je n'ai pas testé, mais je peux voir 1 erreur:

if (!convasSupport()){ 
      return; 
}

Il n'y a pas fonction convasSupport, devrait être canvasSupport()

Source

2012-11-08 15:36:03 galdikas

mon code HTML5 ne fonctionne pas

Répondre

Questions connexes