Javascript 在HTML5画布上绘制矩形

是否可以在变量中存储一个矩形，以便访问该变量并将其移动？比如：

var rect = new Rect();
/* then in update() method */
rect.x += 5;
rect.y += 5;

---

这样做是可能的，还是每次都必须使用上下文创建一个新的矩形？如果这是唯一可能的方法，我不明白如何将画布中绘制的每个矩形作为目标。有人能给我解释一下吗？

HTML5 Cancas有一个位图模型：当你画图时，你可以修改画布上的像素，如果你愿意，你可以读取像素，但是像素的逻辑（线、矩形等）丢失了

画布模型非常快速，可以在对象/向量模型中执行太长的复杂操作，但限制是不能更改或删除绘制的对象，如矩形

如果要这样做，需要使用矢量/对象模型，如SVG（或普通DOM对象）

如果您想使用画布和对象，一个解决方案是将您的rect变量（像您做的那样）保持在纯javascript中（在画布之外），并在每次更改rect时简单地重新绘制整个画布。对于使用canvas的应用程序（例如游戏），它是高效且常见的

这里有一个完整的例子：每10毫秒移动并重新绘制3个矩形

---

我把它做得很简单，但又干净又高效。您可以在实时和快速的应用程序中使用这种逻辑（我有）。

如果您想在画布上移动矩形，您需要在每次更改x或y时清除并重新绘制该矩形。

我将保存您想要绘制的所有矩形及其坐标的模型。 然后，您只需聆听mouseclick事件（或mouseover事件，无论您需要什么），并浏览模型的每个元素，查看鼠标单击是否在矩形坐标内完成

正如前面的海报所说，每当你想对画布进行更改时，你都必须重新绘制画布（尽管只重绘感兴趣的区域可以加快速度）。 希望对你有所帮助

编辑：

您可以定义一个矩形对象：

function Rectangle(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;

    this.contains = function(x, y) {
        return (x > this.x && x <= (this.x + this.w) &&
            y > this.y && y <= (this.y + this.h));
    }

    this.clone = function() {
        return new Dimension(this.x, this.y, this.w, this.h);
    }
}

然后将矩形添加到其中：

model.push(new Rectangle(10,10,10,10));//x, y, width, height

然后，在画布上单击时，从鼠标事件中检索鼠标单击坐标，并在数组上循环以查看单击是否在其中一个矩形内完成：

for (i = 0 ; i < model.length ; i++) {
 if (model[i].contains(mouseEvent.x, mouseEvent.y))
  //do something like redraw your canvas
}

for（i=0；i

我发现本教程确实帮助我了解了这个主题

---

他完成了创建对象、跟踪状态、处理鼠标事件等过程。

首先，你必须将我所说的与@Gaet所说的结合起来

现在，关于减少上下文工作： 重复使用相同的画布上下文而不删除它的一个选项是更改矩形的绘制方式

您必须将合成样式更改为“xor”，以便无论何时绘制两次矩形，它都将消失，并且您将能够将其绘制到新位置

参见下面的示例：

//this will switch context to xor mode
ctx.globalCompositeOperation = 'xor';

//this will paint the rectangle
ctx.fillRect(0, 0, 100, 100);

//this will remove the rectangle
ctx.fillRect(0, 0, 100, 100);

---

“我会保存一个你想用坐标绘制的所有矩形的模型。”-我该怎么做？非常感谢-我该如何像你说的那样将我的rect变量保存在画布之外的纯javascript中？你能举个例子吗？谢谢今天早上我有一些时间，所以我构建了一个完整的示例：参见更新的答案。

//this will switch context to xor mode
ctx.globalCompositeOperation = 'xor';

//this will paint the rectangle
ctx.fillRect(0, 0, 100, 100);

//this will remove the rectangle
ctx.fillRect(0, 0, 100, 100);