Canvas + Javascript Wasserüberlagerung

Ich versuche, Wasserwellen in Javascript auf einer Leinwand zu machen, aber es ist etwas falsch.Canvas + Javascript Wasserüberlagerung

Meine Idee war, 3 Wellen mit verschiedenen Farben zu machen, aber sie überzeichneten sich gegenseitig. Ich konnte nicht herausfinden, wo das Problem liegt.

<!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>

Mein Ergebnis so aussehen sollte + mit

Quelle

2016-04-19 Samy

Was ist Ihre erwartete Ausgabe? – enhzflep

Ich habe die Wunschausgabe hochgeladen – Samy

Ist das Problem die Tatsache, dass die unteren Wellen verschwinden? –

Schleife, um die Wellen zu bewegen, und nach innen, die Schleifenkreise (das heißt, die beiden Schleifen invertieren).

Ziel ist es, alle Kreise einer Welle zu zeichnen, bevor Sie zum nächsten übergehen. Auf diese Weise stellen Sie sicher, dass die Kreise einer Welle über die Kreise der vorherigen gezogen werden.

Sie sollten auch ein zeitbasiertes Inkrement anstelle einer Frame-Anzahl in Betracht ziehen. Es ist nicht garantiert, dass Animationsframes regulär sind und ihre Rate hängt vom System des Benutzers ab.

//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>

Quelle

2016-04-19 03:41:59

Kannst du das Beispiel anpassen, um nur eine einfache langsame Aufwärts-/Abwärtsbewegung der Wellen zu zeigen? – beta

Wenn Sie langsamer gehen möchten, können Sie das frameCount-Inkrement anpassen, z. 'frameCount = frameCount + .3'. Natürlich ist es kein Frame-Count mehr .. –

Wie gesagt, das Beste wäre, zu einem zeitbasierten Inkrement zu wechseln. –

Canvas + Javascript Wasserüberlagerung

Antwort

Verwandte Themen