Question

我正在制作一个HTML5项目，用户可以在画布中拖放多个项目..我想在页面加载时记录这些对象的位置，也在画布中移动它们之后。我为此使用draw函数中canvas的save（）方法将所有这些保存在数组中，以存储所有上下文细节，因为即使在新位置绘制对象时也会调用draw函数。

 function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0, 0, WIDTH, HEIGHT);
// redraw each rect in the rects[] array
for (var i = 0; i < rects.length; i++) {
    var r = rects[i];
    ctx.fillStyle = r.fill;
    rect(r.x, r.y, r.width, r.height);
    pos[i]= ctx.save();
}
}

我在按钮单击时调用第一个数组元素的值，以确保正确存储上下文值。

function position(){
alert("pos[0]");
}

当我运行此代码时，在按钮上单击我在警告框中将输出显示为未定义，如下图所示。 undefined ...

上述代码的小提琴是

http://jsfiddle.net/qm9Eb/4/

请帮助..

Answer 1

更好的方法是为每个矩形创建一个新对象。这样，您可以将每个对象与其自己的属性存储在一个数组中，并在drawloop的每个循环中重绘它。您可以随时访问此对象上的所有变量，并以更灵活的方式使用它。

所以我会用这样的东西：

function Rectangle(props){
  var posX = this.posX = props.x;
  var posY = this.posY = props.y;

  this.width = props.width;
  this.height = props.height;
  this.fill = props.fill;

  this.draw = function(){
    ctx.fillStyle = this.fill;
    ctx.fillRect(this.posX, this.posY, this.width, this.height);
  }
}

在这个JSFiddle http://jsfiddle.net/hgh2S/

中证明了这一点的用法

我已经停止了拖动事件，所有这些都使得用例更加清晰。您可以基于此示例自行轻松实现它。

另外，请注意我将按钮连接到侦听器的方式，而不是直接从HTML元素中调用JS。这是一种更安全的方法。

Answer 2

你应该看看这个question。

save方法将上下文的实际状态推送到数组，但它是一个仅由canvas定义和使用的数组。您可以稍后使用方法restore（）再次加载状态。

关于这个主题，这是一个很好的article，它会比我更好地表现出来。

查找在HTML5画布中绘制的对象的位置

2 个答案: