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

Question

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

<script>
  var canvas = document.getElementById('myCanvasCircle'),
      ctx = canvas.getContext('2d'),
      circle = {},
      drag = false,
      circleMade = false,
      mouseMoved = false;

  function draw() {
    ctx.beginPath();
    ctx.arc(circle.X, circle.Y, circle.radius, 0, 2.0 * Math.PI);
    ctx.stroke();

  }

  function mouseDown(e) {
    ctx.restore();
    circle.startX = e.pageX - this.offsetLeft;
    circle.startY = e.pageY - this.offsetTop;

    circle.X = circle.startX;
    circle.Y = circle.startY;

    if (!circleMade) {
      circle.radius = 0;
    }

    drag = true;
  }

  function mouseUp() {
    drag = false;
    circleMade = true;

    if (!mouseMoved) {
      circle = {};
      circleMade = false;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    mouseMoved = false;
    ctx.save();
  }

  function mouseMove(e) {
    if (drag) {
      mouseMoved = true;
      circle.X = e.pageX - this.offsetLeft;
      circle.Y = e.pageY - this.offsetTop;
      if (!circleMade) {
        circle.radius = Math.sqrt(Math.pow((circle.X - circle.startX), 2) + Math.pow((circle.Y - circle.startY), 2));
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      draw();


    }
  }

  function init() {
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);

  }

  init();

</script>

Answer 1

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

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;

这样可以帮助您保持所有圈子的绘制。 用您的代码填写其余部分。