javascript - 给矩形一个 id

Question

http://fiddle.jshell.net/f6rLds4g/6/

是否可以给我制作的矩形一个id？

我想要的是，当我单击一个矩形时，它会在下一个 Canvas 中显示数据

因此，点击的不是矩形 0，它必须显示数据(来自数据库的 json 或 xml)，但在我可以做到这一点之前，它应该有 id(我认为)

  var canvas = $('#NodeList').get(0);
var ctx = canvas.getContext('2d');
canvas.height = 0;

var a = 20;
var x = 150;
var y = 100;


var rects = [
    [a, 20, x, y],
    [a, 220, x, y],
    [a, 420, x, y],
    [a, 620, x, y],
    [a, 820, x, y],
    [a, 1020, x, y],
    [a, 1220, x, y],
    [a, 1420, x, y],
    [a, 1620, x, y],
    [a, 1820, x, y]



];
for (var i = 0; i < rects.length; i++) {
    canvas.height = canvas.height + 200;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //rectangles opnieuw tekenen
    for (var j = 0; j < i; j++) {
        ctx.fillRect(rects[j][0],
        rects[j][1],
        rects[j][2],
        rects[j][3]);
    }
    ctx.fillRect(rects[i][0],
    rects[i][1],
    rects[i][2],
    rects[i][3]);

}

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



        for (var i = 0; i < rects.length; i++) {
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) {
        var canvas = document.getElementById("NodeDisplay");
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillText('Rectangle ' + i + ' clicked', 110, 10);
    }
}



});

对于整个 html 页面，请点击开头的链接

Answer 1

您只能将 id 分配给元素。
由于您的矩形不是元素，而是 Canvas 的内容，因此它不能有 id。

但是，我想到了三种解决此问题的方法:

1. 为 Canvas 分配一个 click 事件监听器，并使用 JavaScript 检查单击的坐标是否在矩形内。

2. 使用 HTML 元素而不是在 Canvas 上绘制矩形。具有固定宽度、高度、display: block 和 position:absolute 的元素将显示完全相同，但作为 HTML 元素，它可以有一个 id。

3. 在 Canvas 上画出任何你想要的东西，并放置一个 map标记上带有可点击区域。通过这种方式，您可以精确控制每个像素的颜色值和可点击性，但代码可能会很长，而且对于矩形来说可能有点过大。