帆布+ Javascript水覆蓋

我正在試圖在帆布上做Javascript中的水波，但是有一些錯誤。帆布+ Javascript水覆蓋

我的想法是製作3種不同顏色的波，但它們互相透支。我無法弄清楚問題所在。

<!DOCTYPE HTML> 
 
<html> 
 

 
    <style> 
 

 
    <!-- 100% area --> 
 
    body, html { 
 
     height: 100%; 
 
     width: 100%; 
 
    } 
 
    </style> 
 

 
    <body> 
 
    <canvas id="myCanvas" ></canvas> 
 

 
    <script> 
 
     //get window size 
 
     var canvas = document.getElementById("myCanvas"); 
 
     canvas.width = window.innerWidth; /// equal to window dimension 
 
     canvas.height = window.innerHeight; 
 

 
     // get the context 
 
     var canvas = document.getElementById("myCanvas"); 
 
     var context = canvas.getContext('2d'); 
 

 

 
     // VARIABLES 
 
     var frameCount=0; 
 
     var N = 30; 
 
     var positionXTeiler= Math.floor(canvas.width/(N-N/2)); 
 
     var size = 50; 
 
     var xOffset = 200; 
 
     var colors = []; 
 
     var amplitude = 200; 
 
     var wavesCount = 3; 
 

 

 
     var init = function() 
 
     { 
 
     colors.push("rgba(0,0,128,1)"); 
 
     colors.push("rgba(0,0,255,1)"); 
 
     colors.push("rgba(47,86,233,1)"); 
 
     } 
 

 
     var draw = function() { 
 

 
     context.clearRect (0, 0, canvas.width, canvas.height); \t 
 

 

 
     for (i=0; i<N; i++) { 
 

 
      for (n=0; n<wavesCount; n++) { 
 
      var x = amplitude*Math.sin (frameCount*0.02+n*Math.PI/2); 
 
      context.save(); 
 
      context.fillStyle = colors[n]; 
 
      context.beginPath(); 
 
      context.arc(positionXTeiler*i+x-xOffset,canvas.height-n*20,size,0,Math.PI*2,true); 
 
      context.closePath(); 
 
      context.fill(); 
 

 
      context.restore(); 
 
      } 
 
     }  
 
     // count the frame and loop the animation 
 
     frameCount = frameCount+1; 
 
     requestAnimationFrame(draw); 
 
     }; 
 

 
     // start the loop 
 
     init(); 
 
     draw(); 
 

 

 
    </script> 
 

 
    </body> 
 

 
</html>

我的結果應該看起來+與移動

來源

2016-04-19 Samy

什麼是您預期的輸出？ – enhzflep

我上傳了許願輸出 – Samy

問題是底波消失的事實嗎？ –

迴路的波和，裏面，環圓圈（即反轉兩個循環）。

目標是在移動到下一個之前繪製一個波的所有圓。通過這種方式，您可以確保將波形的圓圈繪製在前一個圓圈的頂部。

此外，您可能需要考慮使用基於時間的增量而不是幀數。動畫幀不保證是常規的，它們的速率取決於用戶的系統。

//get window size 
 
var canvas = document.getElementById("myCanvas"); 
 
canvas.width = window.innerWidth; /// equal to window dimension 
 
canvas.height = window.innerHeight; 
 

 
// get the context 
 
var canvas = document.getElementById("myCanvas"); 
 
var context = canvas.getContext('2d'); 
 

 
// VARIABLES 
 
var frameCount=0; 
 
var N = 30; 
 
var positionXTeiler= Math.floor(canvas.width/(N-N/2)); 
 
var size = 50; 
 
var xOffset = 200; 
 
var colors = []; 
 
var amplitude = 200; 
 
var wavesCount = 3; 
 

 

 
var init = function() 
 
{ 
 
    colors.push("rgba(0,0,128,1)"); 
 
    colors.push("rgba(0,0,255,1)"); 
 
    colors.push("rgba(47,86,233,1)"); 
 
} 
 

 
var draw = function() { 
 
    context.clearRect (0, 0, canvas.width, canvas.height); 
 
    for (n=wavesCount-1; n>=0; n--) { 
 
    for (i=0; i<N; i++) { 
 
     var x = amplitude*Math.sin (frameCount*0.02+n*Math.PI/2); 
 
     context.save(); 
 
     context.fillStyle = colors[n]; 
 
     context.beginPath(); 
 
     context.arc(positionXTeiler*i+x-xOffset,canvas.height-n*20,size,0,Math.PI*2,true); 
 
     context.closePath(); 
 
     context.fill(); 
 
     context.restore(); 
 
    } 
 
    }  
 
    // count the frame and loop the animation 
 
    frameCount = frameCount+1; 
 
    requestAnimationFrame(draw); 
 
}; 
 

 
// start the loop 
 
init(); 
 
draw();

<!-- 100% area --> 
 
body, html { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
    <body> 
 
    <canvas id="myCanvas" ></canvas> 
 
    </body> 
 
</html>

來源

2016-04-19 03:41:59

你能否適應這個例子來展示一個簡單的上下波浪動作？ – beta

如果你想慢下來，你可以調整frameCount增量，例如'frameCount = frameCount + .3'。當然，這不是一個幀數了。 –

正如我所說，最好的是切換到基於時間的增量。 –

帆布+ Javascript水覆蓋

回答

相關問題