Question

我画了一个画布矩形元素。我搜索了许多关于坐标的信息，但却无法理解。我的意思是我想向它添加EventListener 但它不是DOM元素所以，我问我如何在画布的给定坐标上添加EventListener？这是我的代码：

function test() {
   var c = document.getElementById("field");
   var ctx = c.getContext("2d");
   ctx.rect(230,100,150,50);
   ctx.stroke();
   ??.addEventListener('click', function(event) {
      funcTest();
   }, false); 
}

Answer 1

尝试使用event.target。

This property of event objects is the object the event was dispatched on. It is different than event.currentTarget when the event handler is called in bubbling or capturing phase of the event.

我建议您使用this链接来参考。

Answer 2

将onMouseMove事件侦听器设置为<canvas>元素，然后将position设置为relative：

function mouseMoved(e)
{
    var mouseX, mouseY;

    if(e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if(e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }

 //do wxhatever you want with the coordinates
}

Answer 3

Canvas的工作方式并非如此，它们实际上是像素的集合。您可以通过向画布添加一个整体的监听器然后检查点击的合作来近似您想要的内容。

c.addEventListner('click',function(event){
    var point = getPos(event);//psuedo function
    if(point.x > 230 && point.y > 100 && point.x < 380 && point.y < 150)
       console.log("rectangle clicked");

},false);

您可以显然自动检查多个对象，并使用矩形的存储值而不是硬编码值，但这应该让您开始。

在画布坐标中绘制的图像上的JavaScript单击事件获取

3 个答案: