HTML5 Game - Canvas Animation Rotation Speed

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Rotation

Description

Rotation Speed

Demo

ResultView the demo in separate window 

<!doctype html>  
<html>  
 <head>  
  <meta charset="utf-8">  
  <title>Rotational Velocity</title>  
  <style>canvas{border:1px solid red;}</style>  
 </head>  /* w  ww .j  a v  a 2s .  co m*/
 <body>  
  <canvas id="canvas" width="400" height="400"></canvas>  
  <script>  
    class Arrow {
        constructor() {
            this.x = 0;
            this.y = 0;
            this.rotation = 0;
        }

        draw(context) {
            context.save();
            context.translate(this.x, this.y);
            context.rotate(this.rotation);
            context.lineWidth = 2;
            context.beginPath();
            context.moveTo(30, 0);
            context.lineTo(-20, -25);
            context.moveTo(30, 0);
            context.lineTo(-20, 25);
            context.closePath();
            context.stroke();
            context.restore();
        }
    }

  window.onload = function () {  
    let canvas = document.getElementById('canvas'),  
        context = canvas.getContext('2d'),  
        arrow = new Arrow(),  
        vr = 2; //degrees  
      
    arrow.x = canvas.width / 2;  
    arrow.y = canvas.height / 2;  
      
    (function drawFrame () {  
      window.requestAnimationFrame(drawFrame, canvas);  
      context.clearRect(0, 0, canvas.width, canvas.height);  
      
      arrow.rotation += vr  * Math.PI / 180; //to radians  
      arrow.draw(context);  
    }());  
  };  
  </script>  
 </body>  
</html>

Related Topic