Javascript 给矩形一个id

可以给我制作的矩形一个id吗

我想知道的是，当我点击一个矩形时，它会在下一个画布中显示数据

因此，它必须显示数据（来自json或数据库的xml），而不是矩形0，但在我这样做之前，它应该有id（我认为）

var canvas=$（'#节点列表'）.get（0）；
var ctx=canvas.getContext（'2d'）；
canvas.height=0；
var a=20；
var x=150；
变量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；irects[i][0]&&xrects[i][1]&&y

---

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

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

然而，我想到了三种解决方法：

为画布指定一个

单击
事件侦听器，并使用JavaScript检查单击的坐标是否位于矩形内

使用HTML元素，而不是在画布上绘制矩形。具有固定宽度、高度、

display:block

和

position:absolute

的元素将完全相同，但作为HTML元素，它可以具有id

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

---

您正在将矩形保存在数组中：

var rects=[]

将每个矩形表示为包含x、y、宽度和高度的数组

因此，如果要给每个rect一个id，只需向每个rect的数组中添加一个id：

var rects = [
    [a, 20, x, y, 'rect0'],
    [a, 220, x, y, 'rect1'],
    [a, 420, x, y, 'rect2'],
    [a, 620, x, y, 'rect3'],
    [a, 820, x, y, 'rect4'],
    [a, 1020, x, y, 'rect5'],
    [a, 1220, x, y, 'rect6'],
    [a, 1420, x, y, 'rect7'],
    [a, 1620, x, y, 'rect8'],
    [a, 1820, x, y, 'rect9']
];

然后，您可以在需要时访问rect数组的id元素：

// test if this is rect with id=='rect3'
var n=3;
if(rects[n][4]=='rect3'){ alert('I have the id==rect3'); }

---

画布上的矩形不再是对象，它只是一个“松散”的、不相关的彩色像素集合。如果您想在画布上使用对象，我建议您使用processing.js、kineticjs或raphaelIs之类的框架。是否可以在画布上执行步骤2？？？我是这方面的初学者，问题是我如何做。我应该重新开始吗？？或者我可以使用我已经使用过的脚本吗have@S.Oruc事实并非如此。原因是

canvas

与DOM不同。这只是你画的画布。您的矩形不是一个元素，而是位图中的一个矩形色块。就像在MSPaint中一样。KineticJS等库允许这些事件按照@Siguza在其第一个建议中描述的方式处理。它是对传递给KineticJS的对象的抽象，而不是将绘图视为单独元素的浏览器API，因为没有这样的东西。@s.Oruc将画布视为图像。从HTML的角度来看，它基本上是一个图像。如果我尝试它，它会在我打开页面时给出提示。（无需单击矩形）

// test if this is rect with id=='rect3'
var n=3;
if(rects[n][4]=='rect3'){ alert('I have the id==rect3'); }