如何删除 HTML 5 画布中的形状？

Question

我创建了这个函数来绘制圆圈：

function draw(x, y, m) {
  i += 1;
  c.beginPath();
  c.arc(x, y, m, 0, Math.PI * 2, false);
  c.strokeStyle = 'white';
  c.stroke();
  c.fillStyle = "white";
  c.fill();
}

我用它用这个功能在随机的地方创建圆圈：

function animator() {
  var x = Math.random() * window.innerWidth;
  var y = Math.random() * window.innerHeight;
  var m = Math.floor(Math.random() * 5)

  window.requestAnimationFrame(animator);

  draw(x, y, m);
}

这将继续添加圈子。但是，最终当达到 200 个圆圈时，我想在每次添加新形状时删除 1 个形状。我的想法是通过将i 相加直到达到 200 来做到这一点。然后在此基础上进行 if/else 语句。

for (var i = 0; i < 200; i++) {
  draw();
}

但是，我不知道如何删除形状。

Answer 1

处理此问题的方法是每帧重绘画布。
在框架的开头，您清除画布，然后重新绘制对象。这样，在简单的数据结构（如数组）中管理对象变得非常容易。

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

function getRandomNumber(min, max) {
  return Math.random() * (max - min) + min;
}

class Circle {
  constructor(centerX, centerY, radius) {
    this.centerX = centerX;
    this.centerY = centerY;
    this.radius = radius;
  }

  draw() {
    context.beginPath();
    context.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'white';
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = 'red';
    context.stroke();
  }
}

function createRandomCircle() {
  const x = getRandomNumber(0, canvas.width);
  const y = getRandomNumber(0, canvas.height);
  const r = getRandomNumber(5, 10);

  return new Circle(x, y, r);
}

// We manage all circles here
const circles = [];

function gameLoop() {
  // Clear the canvas
  context.clearRect(0, 0, canvas.width, canvas.height);

  if (circles.length > 200) {
    circles.shift();
  }

  // Add a circle
  circles.push(createRandomCircle());

  // Let every object draw itself
  circles.forEach(c => c.draw());
}

// Start the loop
window.setInterval(gameLoop, 50);

canvas {
  width: 100%;
  height: 100%;
  background: black;
}

<canvas></canvas>