Javascript 与画布矩形交互

在我的简单HTML页面中有一个canvas元素，它有几个使用

context.fillRect（）

方法绘制的矩形。我需要与这些绘制的矩形交互

---

我怎样才能做到？如何将onclick或onmouseover与这些矩形绑定？

您需要跟踪坐标并检查鼠标是否位于如下所示的其中一个矩形中：

显然，除了单击

之外，您还可以使用
mouseover

var ctx = $('#cv').get(0).getContext('2d');

var rects = [[0, 0, 100, 100], [0, 150, 50, 100]]; // [x, y, width, height]
for(var i=0;i<rects.length;i++) {
    ctx.fillRect(rects[i][0], // fill at (x, y) with (width, height)
                 rects[i][1],
                 rects[i][2],
                 rects[i][3]);
}

$('#cv').click(function(e) {
    var x = e.offsetX,
        y = e.offsetY;

    for(var i=0;i<rects.length;i++) { // check whether:
        if(x > rects[i][0]            // mouse x between x and x + width
        && x < rects[i][0] + rects[i][2]
        && y > rects[i][1]            // mouse y between y and y + height
        && y < rects[i][1] + rects[i][3]) {
            alert('Rectangle ' + i + ' clicked');
        }
    }
});

var ctx=$（'#cv'）.get（0）.getContext（'2d'）；
var rects=[[0,0,100,100]，[0,150,50,100]；//[x，y，宽度，高度]
for（var i=0；i rects[i][1]//鼠标y位于y和y+高度之间
&&y
我已经编写了一些关于如何进入画布的教程，这些教程应该能让您很好地理解您需要什么

简单的回答是，你只需跟踪你想要选择的所有东西。
我已经翻阅了超过四本书，寻找一个在游戏网格上查找和使用坐标的好用例。我知道这个答案已经有两年多的历史了，但它给了我最后一个“啊哈！”的答案，这是我在过去的一周里一直想弄明白的。谢谢