キャンバス+ 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ウォーターオーバーレイ

答えて

関連する問題