HTML5 Game - Canvas Animation Sine Waves

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Waves with two angles

Description

Sine Waves

Demo

ResultView the demo in separate window 

<!doctype html>  
<html>   
 <body>  
  <canvas id="canvas" width="400" height="400"></canvas>  

  <script>  
  window.onload = function () {  
    let canvas = document.getElementById('canvas'),  
        context = canvas.getContext('2d'),  
        angle = 0,  /* w ww.  java  2s  .  co  m*/
        range = 50,  
        centerY = canvas.height / 2,  
        xspeed = 1,  
        yspeed = 0.05,  
        xpos = 0,  
        ypos = centerY;  
      
    context.lineWidth = 2;  
      
    (function drawFrame () {  
      window.requestAnimationFrame(drawFrame, canvas);  
      
      context.beginPath();  
      context.moveTo(xpos, ypos);  
      //Calculate the new position.  
      xpos += xspeed;  
      angle += yspeed;  
      ypos = centerY + Math.sin(angle) * range;  
      context.lineTo(xpos, ypos);  
      context.stroke();  
    }());  
  };  
  </script>  
 </body>  
</html>

Related Topic