说明：

Question

所以基本上我想为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个。如果我要点击第2组中的任何内容，那么第2组中的所有内容都会将其背景颜色更改为提示的颜色！

Answer 1

由于Canvas是一个被动元素，就像你拿着像素一样，你不知道它们是什么，你需要自己预定一切。

为此，您可以创建包含重要信息的对象，例如区域和颜色。

例如（有很多方法可以制作这些，但为了简单起见）：

// ctx = context
function myObject(ctx, x, y, w, h, color) {

    this.render = function() {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, w, h);
    }

    this.setColor = function(newColor) {
        color = newColor;
        this.render();
    }

    this.setPosition = function(newX, newY) {
        x = newX;
        y = newY;
        this.render();
    }
    //... etc. ...
}

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

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();
}

当您需要更新对象时，只需调用其setColor函数：

//n = index, use a for-loop to update a range (group)
stack[n].setColor(newColor);

如果你需要小组，那么你可以将它们堆叠起来：

var group = [];

如上所述填写组，然后：

stack.push(group);

（你可以通过在对象上实现一个方法进行同样的测试，该方法采用x和y位置并与对象的位置和宽度/高度进行比较）。

对于内存效率，你可能想要prototype一些方法（如果它们不需要访问内部变量等等）。

希望有所帮助。

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

说明：

1 个答案: