İki ayrı animasyonlu şelale nesnesi oluştururken tuvali oluşturma

Question

Her biri için yeni bir tuval oluşturmaya gerek kalmadan, istediğim kadar çok şelale nesnesi başlatmak için bir şablon oluşturmaya çalışıyorum. Farklı renklere sahip iki şelale istiyorum ama işe yaramıyor. Nedenini anlayamıyorum ve birkaç saatten beri uğraşıyorum. Kırmızı ve mavi şelalenin, ilkinin son örneklemeden daha düşük bir z indeksi olduğu yerde nasıl görünmesini sağlayabilirim? https://jsfiddle.net/testopia/d9jb08xb/5/

ve burada tekrar niyetim iki ayrı şelaleler oluşturmak için ancak prototip miras bu kez: Yapmam

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

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

İşte benim çalışma kod ikincisini tercih ederim ama sadece işe yaramıyor.

Answer 1

Sorun şu ki, her şelale tuvalini temizliyorsunuz. Biri diğerine boyamaktır. Tabii ki, su bu şekilde lekelenerek görebilirsiniz.

Şelalelerinizi, her animasyon çerçevesinde tuvali ilk önce temizledikten sonra hepsini boyayacağınız şekilde yönetmelisiniz. Bu olmasını sağlar

requestAnimationFrame(function() { 
    ctx.clearRect(0, 0, w, h); // ensure that w and h are available here. 
    self.flow.call(self); 
}); 

... buraya ... ...

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

https://jsfiddle.net/kpomzs83/

Answer 2

Basitçe bu çizgiyi taşımak: Burada bir ana flow_all() fonksiyonu kullanarak hızlı bir girişimdir 2. şelaleden önce tuvali temizlemezsiniz. Bu tuvali temizler, sonra iki şelaleyi çizer. Elbette onları su dizinize eklediğinizden emin olun.