Html 获取画布内每个矩形的单击事件？

我不知道如何在每个矩形上注册单击事件

以下是示例：

---

基本上，您必须跟踪矩形在画布上的位置，然后在画布上设置事件侦听器。从那里，您可以获取单击事件的坐标，并遍历所有矩形以测试“碰撞”

下面是一个这样做的例子：

html:

javascript:

// get canvas element.
var elem = document.getElementById('myCanvas');

function collides(rects, x, y) {
    var isCollision = false;
    for (var i = 0, len = rects.length; i < len; i++) {
        var left = rects[i].x, right = rects[i].x+rects[i].w;
        var top = rects[i].y, bottom = rects[i].y+rects[i].h;
        if (right >= x
            && left <= x
            && bottom >= y
            && top <= y) {
            isCollision = rects[i];
        }
    }
    return isCollision;
}

// check if context exist
if (elem && elem.getContext) {
    // list of rectangles to render
    var rects = [{x: 0, y: 0, w: 50, h: 50},
                 {x: 75, y: 0, w: 50, h: 50}];
  // get context
  var context = elem.getContext('2d');
  if (context) {

      for (var i = 0, len = rects.length; i < len; i++) {
        context.fillRect(rects[i].x, rects[i].y, rects[i].w, rects[i].h);
      }

  }

    // listener, using W3C style for example    
    elem.addEventListener('click', function(e) {
        console.log('click: ' + e.offsetX + '/' + e.offsetY);
        var rect = collides(rects, e.offsetX, e.offsetY);
        if (rect) {
            console.log('collision: ' + rect.x + '/' + rect.y);
        } else {
            console.log('no collision');
        }
    }, false);
}

//获取画布元素。
var elem=document.getElementById（'myCanvas'）；
函数碰撞（矩形、x、y）{
var isCollision=false；
for（var i=0，len=rects.length；i=x
&&左=y
&&top我找到了一种在mozilla中使用clientX，clientY而不是offsetX/offsetY的方法

此外，如果您的画布超出了
内部高度
，并使用了滚动条，请将
窗口。pageYOffset
添加到
e.clientY
。如果您的画布超出了宽度，则采用相同的方法

另一个例子是my github：

这是另一个解释这一点的链接：
这是一个老问题，但在发布时曾经很难做到的事情现在变得容易多了

有许多库可以跟踪在画布上绘制的对象的位置，并处理处理鼠标交互的所有复杂性。请参阅，
,
或
还有这个

您也可以采取不同的方法并使用
及
有一个使用SVG和VML而不是画布的解决方案，甚至可以在IE6上工作

您的示例更改为使用Raphaël，如下所示：

var r = Raphael(0, 0, 300, 150);

r.rect(0, 0, 50, 50)
    .attr({fill: "#000"})
    .click(function () {
        alert('first rectangle clicked');
     });

r.rect(75, 0, 50, 50)
    .attr({fill: "#000"})
    .click(function () {
        alert('second rectangle clicked');
     });

看

2015年更新
您还可以使用HTML5画布的保留模式矢量绘图API-有关更多信息，请参阅。
如果您希望在画布中支持多个矩形并处理其单击事件，请使用下面的函数…..修改了Matt King给出的逻辑

    function collides(myRect, x, y) {
    var isCollision = false;
    for (var i = 0, len = myRect.length; i < len; i++) {
        var left = myRect[i].x, right = myRect[i].x+myRect[i].w;
        var top = myRect[i].y, bottom = myRect[i].y+myRect[i].h;
       if ((left + right) >= x
            && left <= x
            && (top +bottom) >= y
            && top <= y) {
            isCollision = json.Major[i];
        }
        }
    }
    return isCollision;
} 

函数冲突（myRect，x，y）{
var isCollision=false；
for（var i=0，len=myRect.length；i=x
&&左=y
&&top如果您希望在画布中支持多个矩形并处理其单击事件，请使用下面的函数



var elem=document.getElementById（'myCanvas'），
elemLeft=elem.offsetLeft，
elemTop=elem.offsetTop，
context=elem.getContext（'2d'），
元素=[]；
//为“单击”事件添加事件侦听器。
元素addEventListener（'click'，函数（事件）{
//var leftWidth=$（“#leftPane”）.css（“宽度”）
//var x=event.pageX-（elemLeft+parseInt（leftWidth）+220），
//y=event.pageY-（elemTop+15）；
var x=event.pageX-elemLeft，
y=event.pageY-elemTop；
elements.forEach（函数（元素）{
if（y>element.top&&yelement.left&&x对于（i=1；我在一个页面上有4个动态甜甜圈图表，这些图表是动态创建的，我需要在每个图表的中心放置一个可点击的文本，可以点击。有什么想法吗？问题问：谢谢你的回答..但是当画布中有多个矩形时，你的碰撞功能不起作用…我修改如下，它起作用了…如何你能用圆圈或其他什么东西来做吗？@user10124491，检查一下点击距离圆圈中心的距离。如果这个距离小于圆圈半径，它就在里面。这篇文章可能会有帮助：
    function collides(myRect, x, y) {
    var isCollision = false;
    for (var i = 0, len = myRect.length; i < len; i++) {
        var left = myRect[i].x, right = myRect[i].x+myRect[i].w;
        var top = myRect[i].y, bottom = myRect[i].y+myRect[i].h;
       if ((left + right) >= x
            && left <= x
            && (top +bottom) >= y
            && top <= y) {
            isCollision = json.Major[i];
        }
        }
    }
    return isCollision;
}