Javascript 你能给HTML5画布中的项目赋值吗？

所以本质上我想为canvas创建下面的函数。现在，这适用于任何包含元素的id：

$('.class').click(function(){
    var color = prompt('what color would you like to change this stroke to?');
    $('.class').each(function(){
        $(this).css('background-color', color);
    });
});

有没有办法给画布中的项目赋值，这样我就可以触发我需要的东西，或者这根本不可能

说明：

---

如果这还不清楚……假设我在按下按钮时，将东西以10人一组的方式添加到画布中。如果我按了3次那个按钮，那么我有3组10人。如果我点击第二组中的任何东西，那么第二组中的所有东西的背景颜色都会变为提示的颜色

因为画布是一个被动元素，因为在你不知道像素是什么的情况下，你需要保存所有的东西

为此，您可以创建保存重要信息（如区域和颜色）的对象

例如（有无数种方法可以实现这些，但为了简单起见）：

现在，您可以创建数组或堆栈来保存对象：

var stack = [];

按下按钮时：

var w = 50, h = 50, i = 0;

for(;i < 10; i++) {
    var o = myObject(ctx, i * w - 2, 0, w, h);
    stack.push(o);
    o.render();
}

如果需要组，则可以按如下方式堆叠它们：

var group = [];

按上述方式填写分组，然后：

stack.push(group);

（通过在对象上实现一个方法，采用x和y位置，并与对象的位置和宽度/高度进行比较，您也可以使用相同的方法进行命中测试）

为了提高内存效率，您可能希望

prototype

一些方法（如果它们不需要访问内部变量等等）

---

希望对您有所帮助。

HTML5画布是一个绘图元素，一旦绘制，您就无法与其中的特定元素交互。但是，您仍然可以重新绘制整个画布。另一方面，SVG允许您与特定元素进行交互。raphaelJS:+1是一个很好的库，但是通过命中测试，它将如何计算出组？@RyanSaxe您可以为对象提供

groupId

属性。

var group = [];

stack.push(group);