javascript – 在HTML5画布上绘制Rects

是否可以在变量中存储矩形以访问该变量并将其移动?就像是:

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

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

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

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

编辑:

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

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
}
相关文章
相关标签/搜索