畫布創建兩個單獨的動畫瀑布對象

我想創建一個模板，以啓動儘可能多的瀑布對象，而不必爲每個對象創建一個新的畫布。我想要兩個不同顏色的瀑布，但它不起作用。自從幾個小時以來，我無法弄清楚爲什麼，而且我正在使用它。我怎樣才能讓紅色和藍色的瀑布出現在第一個比最後一個實例更低的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/~~

我做更喜歡後者，但我不能得到任何工作。

來源

2016-03-24 Asperger

問題是您正在清除每個瀑布中的畫布。一個是重疊其他。您可以立即看到，通過註釋行

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

當然，水塗抹這種方式。

你必須以一種方式管理你的瀑布，在每個動畫幀中你首先清除畫布，然後讓他們畫全部。下面是使用主flow_all()功能的快速嘗試： https://jsfiddle.net/kpomzs83/

來源

2016-03-24 09:48:22 jayms

只需移動這條線......

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

...這裏......

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

這確保了在第二個瀑布繪製之前，您不清除畫布。這將清除畫布，然後繪製兩個瀑布。當然，確保你已經將它們添加到你的水陣列中。

來源

2016-04-17 08:10:42 ManoDestra

畫布創建兩個單獨的動畫瀑布對象

回答

相關問題