キャンバス要素：画像がクリックされた

キャンバスに描かれた画像をクリックしたかどうかを知りたい。画像をクリックすると何も起こりません。アラートは呼び出されません。最後のif条件は決して通過しません。何か案が？キャンバス要素：画像がクリックされた

<!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>

出典

2010-12-02 thomas

2つの問題があります。

はまず、あなたのイベントコードが画面を基準にしたマウス位置を返しscreenX壊れている、あなたはclientXまたはIE pageXに詳しくquirksmodeを参照を使用する必要があります。

canvas.addEventListener('click', function(event) { 
    event = event || window.event; // IE does not pass the event param! 

    // you should use var infront of these local variables 
    // otherwise you leak them into the global namespace 
    // and you can even overwrite things there if you don't watch out 
    var xc = (event.clientX ? event.clientX : pageX) - canvas.offsetLeft; 
    var yc = (event.clientY ? event.clientY : pageY) - canvas.offsetTop;

第2に、コードはChromeで実行されません！これは、15行目でUncaught TypeError: DOM object constructor cannot be called as a function.で失敗します。Image()が新しいインスタンスを返すことが保証されているので、画像を作成するときにnewキーワードを使用する必要があります。

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

出典

2010-12-02 19:01:05

DOMエラーがここ（FF 3.6）起きていません。 clientXとscreenXの違いは何ですか？私は記事を読んで、ありがとう。 – thomas

Chromeでエラーが表示されますが、関数を呼び出すだけで新しい画像が返されるという保証はありません。違いは 'screenX'は画面の左上から始まるということです。 'clientX'はウェブページの左上から始まります。つまり、後者のみが正しい結果を返します。 –

ウェブページと画面の違いはありませんでした。私は記事を読むつもりです。ありがとうございました。 – thomas

キャンバス要素：画像がクリックされた

答えて

関連する問題