Question

是否可以在变量中存储矩形以访问该变量并将其移动？类似的东西：

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

这样的事情是可能的，还是每次都要使用上下文创建一个新的矩形？如果这是唯一可行的方法，我不明白如何定位画布中绘制的每个矩形。有人可以向我解释一下吗？

Answer 1

HTML5 Cancas有一个位图模型：绘制时修改画布的像素，如果需要，可以读取像素，但像素的逻辑（线条，线条等）会丢失。

画布模型非常快，可以在对象/矢量模型中执行过长的复杂事物，但限制是您不能更改或删除像rects这样的绘制对象。

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

如果你想使用画布和对象，一个解决方案是保持你的rect变量（就像你所做的那样）在普通的javascript（在画布之外），并且每次更改rect时只需重绘整个画布。对于使用canvas（例如游戏）的应用程序来说，它是高效且常见的。

这是一个完整的例子：每10毫秒移动3个rects并重新绘制。

http://jsfiddle.net/dystroy/PkzDA/

我说它非常简单但干净又高效。你可以在真实和快速的应用程序中使用这种逻辑（我愿意）。

Answer 2

我会用你的坐标保存你想要绘制的所有矩形的模型。然后，您只需要听取鼠标点击事件（或鼠标悬停事件，无论您需要什么），并浏览模型的每个元素，看看鼠标是否在矩形坐标内完成。

正如之前的海报所说，每次想要对其进行更改时都必须重绘画布（尽管您可以通过仅重绘感兴趣的区域来加快速度）。希望有所帮助！

编辑：

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

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

然后有一个数组作为你的模型：

var model = [];

然后将矩形添加到其中：

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
}

Answer 3

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

http://simonsarris.com/blog/510-making-html5-canvas-useful

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

Answer 4

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

Answer 5

首先，你必须将我要说的内容与@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);

在HTML5画布上绘制Rects

5 个答案: