一旦实例化/绘制到画布上，删除/删除函数对象的最佳方法是什么？

Question

下面的 sn-p 代码显示了一个名为“Circle”的函数对象被绘制到画布元素上。我知道如何从屏幕上删除圆的 visual 方面。我可以根据event.listener 或“对象碰撞”，使用c.globalAlpha=0.0; 随着时间的推移简单地改变它的不透明度，但是如果我在视觉上 undraw 说圆圈；它仍然存在并且正在计算，它仍然占用浏览器资源，因为它在我的画布元素上来回弹跳。

所以我的问题是：一旦实例化/绘制到画布上，删除/删除函数对象的最佳方法是什么？ =>（这样它才能真正被删除并且不会在浏览器中无形地弹跳)

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 类/对象来更进一步的做法并不少见，该类/对象保留场景对象的列表并为程序的其他部分提供使用接口（例如，@987654326 @ 或 Scene.remove(myOldCircle))。