What is the best way to remove/delete a function object once instantiated/drawn to canvas?

问题

The snippet code below shows a single function object called "Circle" being drawn to a canvas element. I know how to remove the visual aspect of the circle from the screen. I can simply change its opacity over time with c.globalAlpha=0.0; based on event.listener 's or 'object collision', However if I visually undraw said circle; it still is there and being computed on, its still taking up browser resources as it invisibly bounces to and fro on my canvas element.

So my question is: What is the best way to remove/delete a function object once instantiated/drawn to canvas? =>(so that it is truly removed and not invisibly bouncing in the browser)

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

回答1:

A lot of canvas libraries solve this problem by keeping an array of objects that are in the canvas scene. Every time the animate() function is called, it loops through the list of objects and calls update() for each one (I'm using the names you're using for simplicity).

This allows you to control what is in the scene by adding or removing objects from the array. Once objects are removed from the array, they will no longer be updated (and will get trash collected if there are no other references hanging around).

Here's an example:

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

It's not uncommon to take this a step further by creating a Scene or Canvas class/object that keeps the list of scene objects and gives an interface for other parts of the program to use (for example, Scene.add(myNewCircle) or Scene.remove(myOldCircle)).

来源：https://stackoverflow.com/questions/50634336/what-is-the-best-way-to-remove-delete-a-function-object-once-instantiated-drawn

标签

javascript

canvas