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

Question

我正在尝试创建一个模板来启动任意数量的瀑布对象，而不必为每个对象创建一个新的 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/

我再次打算创建两个独立的瀑布，但这次使用原型(prototype)继承:

<德尔> https://jsfiddle.net/testopia/d9jb08xb/8/

我确实更喜欢后者，但我无法正常工作。

Answer 1

问题是您正在清除每个瀑布中的 Canvas 。一个正在重绘另一个。您可以通过注释掉该行立即看到这一点

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

当然，水会那样弄脏。

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