javascript - Canvas 创建两个单独的动画瀑布对象

我正在尝试创建一个模板，以根据需要启动任意数量的瀑布对象，而不必为每个瀑布对象创建新的画布。我想要两个颜色不同的瀑布，但是不起作用。几个小时以来，我不知道为什么，而且一直在努力。如何使红色和蓝色瀑布同时出现在第一个瀑布的z索引比最后一个实例低的地方？

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;

function waterfall(color) {
    var self = this;
  this.color = color;
    this.water = [];
  this.Construct = function(y, vel, acc) {
    this.y = y;
    this.vel = vel;
    this.acc = acc;
  }

  for(var i = 0; i < 1000; i++) {
    this.water.push(new this.Construct(Math.random() * 65, 0.1 + Math.random() * 4.3, 0));
  }

  this.flow = function(color) {
    ctx.clearRect(0, 0, w, h);
    for(var i = 0; i < this.water.length; i++) {
        this.water[i].vel += this.water[i].acc;
        this.water[i].y += this.water[i].vel;
        ctx.beginPath();
        ctx.arc(0 + i * 0.5, this.water[i].y, 2, 0, Math.PI * 2, false);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
    }
    for(var i = 0; i < this.water.length; i++) {
      if(this.water[i].y > window.innerHeight) {
        this.water[i].y = 0;
      }
    }
    requestAnimationFrame(function() {
      self.flow.call(self);
    });
  }
  this.flow(this.color)
}

new waterfall("blue");
new waterfall("red");

这是我的工作代码：https://jsfiddle.net/testopia/d9jb08xb/5/

再一次，我打算创建两个单独的瀑布，但是这次是原型继承：

https://jsfiddle.net/testopia/d9jb08xb/8/

我确实更喜欢后者，但我都不能工作。

最佳答案

问题在于您正在清理每个瀑布中的画布。一种是粉刷另一种。您可以通过注释掉该行立即看到

ctx.clearRect(0, 0, w, h);

当然，水会那样涂。

您必须以一种方式管理瀑布，即在每个动画帧中先清除画布，然后让它们绘制所有内容。
这是使用主flow_all()函数的快速尝试：
https://jsfiddle.net/kpomzs83/