Как удалить фигуры в HTML 5 canvas? - PullRequest
Новая
       24

Как удалить фигуры в HTML 5 canvas?

0 голосов
/ 04 ноября 2018

Я создал эту функцию для рисования кругов: 

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();
}

Однако я не знаю, как удалять фигуры.

1 Ответ

0 голосов
/ 04 ноября 2018

То, как вы справляетесь с этим, заключается в перерисовке холста в каждом кадре.
В начале вашего кадра вы очищаете холст, а затем перерисовываете свои объекты. Таким образом, становится очень легко управлять вашими объектами в простых структурах данных, таких как массивы. 

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>
...