javascript - 在 HTML5 Canvas 上绘制矩形

Question

是否可以将矩形存储在变量中以便访问该变量并四处移动它？像这样的东西:

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

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

Answer 1

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

正如前面的发帖者所说，每次要对其进行更改时都必须重新绘制 Canvas (尽管您可以通过仅重新绘制感兴趣的区域来加快速度)。希望能有所帮助!

编辑:

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

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

然后，当您在 Canvas 上单击时，您会从鼠标事件中检索鼠标单击坐标，然后遍历数组以查看单击是否在其中一个矩形内完成:

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