画布元素：图片点击

我想知道用户是否点击画布中绘制的图片。我点击图片，但没有任何反应。该警报未被调用。最后一个条件永远不会通过。任何想法？画布元素：图片点击

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

这里有两个问题。

首先，你的事件代码被打破相对于屏幕鼠标位置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;

其次，代码从未在Chrome中运行！它在第15行失败，因为Uncaught TypeError: DOM object constructor cannot be called as a function.。您在创建映像时需要使用new关键字，因为否则不能保证Image()将返回新实例。

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

来源

2010-12-02 19:01:05

DOM错误在这里没有发生（FF 3.6）。 clientX和screenX有什么区别？我会阅读文章，谢谢。 – thomas 2010-12-02 19:15:10

画布元素：图片点击

回答

相关问题