Canvas + Javascript water overlay

Я пытаюсь сделать волны воды в Javascript на холсте, но что-то не так.Canvas + Javascript water overlay

Моя идея делала 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

Является ли проблема тем фактом, что нижние волны исчезают? –

Loop волны и, внутри, петли окружности (то есть инвертировать две петли).

Цель состоит в том, чтобы нарисовать все круги волны перед тем, как перейти к следующему. Таким образом, вы убедитесь, что круги волны нарисованы поверх кругов предыдущего.

Кроме того, вы можете захотеть использовать временное приращение вместо количества кадров. Рамки анимации не гарантируются на регулярной основе, и их скорость зависит от системы пользователя.

//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'. Конечно, это больше не количество кадров. –

Как я уже сказал, лучше всего было бы перейти к временному приращению. –

Canvas + Javascript water overlay

ответ

Смежные вопросы