Élément de canevas: Image cliquée

Je veux savoir si l'utilisateur a cliqué sur une image dessinée dans un canevas. Je clique sur l'image mais rien ne se passe. L'alerte n'est pas appelée. La dernière condition if ne passe jamais. Une idée?Élément de canevas: Image cliquée

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <canvas id="game" height="500" width="700"> 
      </canvas> 
     </div> 
     <script> 
     (function() { 
      var canvas = document.getElementById('game'), 
       context = canvas.getContext('2d'), 
       fps = 1, 
       character = Image(), 
       positions = [[125, 55], [480, 55], [125, 185], [480, 182], [125, 315], [480, 315]], 
       random, x, y, xc, yc = null; 

      canvas.addEventListener('click', function(event) { 
       xc = event.screenX - canvas.offsetLeft; 
       yc = event.screenY - canvas.offsetTop; 

       if((xc >= x) && (xc <= (x + character.width)) && (yc >= y) && (yc <= (y + character.height))) { 
        alert('X = ' + x + 'Y = ' + y); 
       } 
      }, true); 

      character.src = 'character.png'; 

      setInterval(function() { 
       random = (Math.floor(Math.random() * 6)); 

       random = positions[random]; 
       x = random[0]; 
       y = random[1]; 

       context.clearRect(0, 0, canvas.width, canvas.height); 
       context.drawImage(character, x, y); 
      }, 1000/fps); 
     }()); 
     </script> 
    </body> 
</html>

Source

2010-12-02 thomas

Deux problèmes ici.

Tout d'abord, votre code d'événement est cassé screenX retourne la position de la souris par rapport à l'écran , vous devez utiliser clientX ou dans IE pageX voir quirksmode pour plus d'informations. Deuxièmement, le code ne s'exécute jamais dans Google Chrome! Il échoue avec Uncaught TypeError: DOM object constructor cannot be called as a function. à la ligne 15. Vous devez utiliser le mot-clé new lors de la création de l'image, car il n'est pas garanti autrement, que le Image() renverra une nouvelle instance.

... 
context = canvas.getContext('2d'), 
fps = 1, 
character = new Image(), 
...

Source

2010-12-02 19:01:05

L'erreur DOM ne se produit pas ici (FF 3.6). Quelle est la différence entre clientX et screenX? Je vais lire l'article, merci. – thomas

Chrome me donne l'erreur, il n'est pas garanti que l'appel de la fonction retournera une nouvelle image. La différence est que «screenX» commence en haut à gauche de votre écran. 'clientX' commence en haut à gauche de la page Web, ce qui signifie que seul ce dernier vous donnera les résultats corrects dans ce cas. –

Je n'ai pas compris la différence entre une page Web et un écran. je vais lire l'article. Je vous remercie. – thomas

Élément de canevas: Image cliquée

Répondre

Questions connexes