Question

我正在创建一个动态绘制多个矩形的网页。我可以绘制单个对象，但是一旦我尝试绘制另一个对象，前一个就消失了。我尝试使用save（）和restore（）保存状态，似乎我无法将其放在此处。将保存方法放入mouseup并在mousedown事件中调用restore方法是不合逻辑的？任何帮助或建议将不胜感激。

{{1}}

Answer 1

您需要在单独的对象中保存有关绘制内容的信息，每次绘制到画布时都会擦除并重绘新对象。因此，当你清除然后绘制时，你正在清理，然后绘制一个新的，但旧的被遗忘。一个很好的例子：

var SavedCircles = [];
var circleInfo = function()
{
  this.x = 0;
  this.y = 0;
  this.startX = 0;
  this.startY = 0;
  this.radius = 0;
}
circle = {};

function draw()
{
   for(var x=0;x<SavedCircles.length;x++)
   {
       ctx.beginPath();
       ctx.arc(SavedCircles[x].X, SavedCircles[x].Y, SavedCircles[x].radius, 0, 2.0 * Math.PI);
       ctx.stroke();
   }
}

function mouseDown()
{
  circle = new circleInfo();
}

function mouseUp()
{
   SavedCircles.push(circle);
}

function mouseMove()
{
   draw();
}

所以你可以摆脱保存和恢复，也可以通过以下方式快速清除画布： canvas.width = canvas.width;

这应该可以帮助你保持所有圈子的抽取。用你的代码填写剩下的部分。

如何在同一画布上放置多个对象？

1 个答案: