是否可以将矩形存储在变量中以便访问该变量并四处移动它?像这样的东西:
var rect = new Rect();
/* then in update() method */
rect.x += 5;
rect.y += 5;
这样的事情是可能的,还是每次都必须使用上下文创建一个新的矩形?如果这是唯一可能的方法,我不明白如何定位 Canvas 中绘制的每个矩形。有人可以给我解释一下吗?
最佳答案
我会用坐标保存所有你想绘制的矩形的模型。 然后,您只需监听 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
}
关于javascript - 在 HTML5 Canvas 上绘制矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10366849/