Каков наилучший способ удалить / удалить объект функции после создания / отрисовки на холсте?

Question

Приведенный ниже фрагмент кода показывает один функциональный объект с именем «Круг», который рисуется на элемент холста.Я знаю, как убрать визуальный аспект круга с экрана.Я могу просто изменить его непрозрачность с течением времени с помощью c.globalAlpha=0.0; на основе event.listener 'или' столкновения объектов ', однако, если я визуально undraw сказал круг;он все еще существует и вычисляется, он все еще занимает ресурсы браузера, так как он незаметно подпрыгивает на моем элементе canvas.

Итак, мой вопрос: Каков наилучший способ удаления / удаления функционального объекта после его создания / отрисовки на холсте? => (чтобы он действительно удалялся и не был незаметно подпрыгивать вбраузер)

let canvas = document.getElementById('myCanvas');
let c = canvas.getContext('2d');

function Circle(x, y, arc, dx, dy, radius){
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.arc = arc;
  this.cCnt = 0;
  this.radius = radius;

  this.draw = function() {
    c.beginPath();
    //context.arc(x,y,r,sAngle,eAngle,counterclockwise);
    c.arc(this.x, this.y, this.radius, this.arc, Math.PI * 2, false); //
    c.globalAlpha=1;
    c.strokeStyle = 'pink';
    c.stroke();
  }

  this.update = function() {
    if (this.x + this.radius > canvas.width || this.x - this.radius < 0){
      this.dx = -this.dx;
    }
    if (this.y + this.radius > canvas.height || this.y - this.radius < 0){
      this.dy = -this.dy;
    }
    this.x += this.dx;
    this.y += this.dy;

    this.draw();
  }
}

var circle = new Circle(2, 2, 0, 1, 1, 2); // x, y, arc, xVel, yVel, radius

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, canvas.width, canvas.height)
  circle.update();
}

animate();

body {
      background-color: black;
      margin: 0;
    }

<canvas id="myCanvas" width="200" height="60" style="background-color: white">

Answer 1

Многие библиотеки холста решают эту проблему, сохраняя массив объектов, находящихся на сцене холста.Каждый раз, когда вызывается функция animate(), она просматривает список объектов и вызывает update() для каждого (я использую имена, которые вы используете для простоты).

Это позволяет вамконтролировать, что находится в сцене, добавляя или удаляя объекты из массива.Как только объекты будут удалены из массива, они больше не будут обновляться (и будут собирать мусор, если вокруг нет других ссылок).

Вот пример:

const sceneObjects = [];

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, canvas.width, canvas.height);

  // Update every object in the scene
  sceneObjects.forEach(obj => obj.update());
}

// Elsewhere...

function foo() {
  // Remove an object
  sceneObjects.pop();

  // Add a different object
  sceneObjects.push(new Circle(2, 2, 0, 1, 1, 2));
}

Этоне редкость сделать этот шаг дальше, создав класс / объект Scene или Canvas, который хранит список объектов сцены и предоставляет интерфейс для использования другими частями программы (например, Scene.add(myNewCircle) или * 1013).*).