如何有效地实现这种效果？

var canvas    = document.querySelector("canvas");
var ctx       = canvas.getContext("2d");
var pixelSize = 20; // px, 20px squares
var speed     = 33; // ms, (1000ms / 33ms = ~30fps)
var ttl       = 2000.0; // ms, (pixel fade out time)

// Pixel constructor
function Pixel(x, y, size, rgba) {
  
  if (!(this instanceof Pixel)) {
    return new Pixel(x, y, size, rgba);
  }
  
  // pixel update function; called once per tick
  function update(delta) {
    // decrease the alpha of this pixel by delta/ttl;
    rgba.a = (rgba.a - (delta/ttl)).toFixed(2);
    // redraw this pixel
    ctx.clearRect(x, y, size, size);
    ctx.fillStyle = rgbaStr(rgba);
    ctx.fillRect(x, y, size, size);
    // return true if pixel alpha is still above 0
    // return false when this pixel is no longer visible (garbage collect)
    return rgba.a > 0;
  }
  
  // export the update function
  this.update = update;
}

// rgba helper
function rgba(r, g, b, a) {
    return {r:r, g:g, b:b, a:a};
}

// convert rgba to CSS string
function rgbaStr(rgba) {
    var args = [rgba.r, rgba.g, rgba.b, rgba.a];
    return "rgba(" + args.join(",") + ")";
}

// all "active" pixels
var pixels = [];

// Pixel factory function
function createPixel(x, y, size, rgba) {
  // create pixel
  var pixel = new Pixel(
    Math.round(x / size) * size, // snap to grid
    Math.round(y / size) * size, // snap to grid
    size,                        // pixel/grid size
    rgba                         // rgba color
  );
  // add pixel to array
  pixels.push(pixel);
  // return constructed pixel      
  return pixel;
}

// the loop
function loop(now) {
    // calculate delta
    var delta = Date.now() - now;
    // loop through each pixel
    pixels.forEach(function(pixel, idx) {
        // if pixel is faded out completely...
        if (!pixel.update(delta)) {
           // delete the pixel
           pixels.splice(idx, 1); 
        }
    });
    // loop again (based on speed)
    setTimeout(loop.bind(null, Date.now()), speed);
}

// size canvas to full size of window
function resizeCanvas(event) {
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
}

// setup
function init() {
  // set canvas size
  resizeCanvas();

  // resize canvas size whenever window is resized
  window.addEventListener("resize", resizeCanvas);
  
  // create pixels on mousemove
  canvas.addEventListener("mousemove", function(event) {
    createPixel(
      event.clientX,  // mouse x position
      event.clientY,  // mouse y position
      pixelSize,      // the pixelSize defined above
      rgba(255,0,0,1) // start at 100% red
    );
  });
  
  // start the loop
  loop(Date.now());
}

// start everything
init();

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    background-color: black;
    color: white;
}

<canvas></canvas>