HTML Canvas Animation circular movement

Description

HTML Canvas Animation circular movement

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script> 

// SUMMARY: Draws circular movement on a canvas.
window.onload = function()//  w  w  w.  j  av a 2 s .  c  o  m
{ 
   canvasBall  = document.getElementById("canvasBall"); 
   contextBall = canvasBall.getContext("2d");
   canvasBG    = document.getElementById("canvasBackground"); 
   contextBG   = canvasBG.getContext("2d"); 

   let xPos   = canvasBall.width/2;   let change   = 20; 
   let yPos   = canvasBall.height/2;  let interval = 50;          
   let count  = 0;                    let max      = 100;
   let radius = 90;

   // BACKGROUND canvas filled with color.
   contextBG.fillStyle = "deeppink";
   contextBG.fillRect(0, 0, canvasBG.width, canvasBG.height);

   // BALL IMAGE loaded from website.
   let ball = new Image();
   ball.src = "image1.png";

   ball.onload = function()
   { 
      // CENTER rotation.
      contextBall.translate(xPos,yPos); 

      // INTERVAL for drawin
      let intervalID = setInterval(drawBall,interval);
   
      // DRAW IMAGE function.
      function drawBall()
      {
         // CLEAR canvas for each ball image.
         //     Note: Comment out to see all images.

         contextBall.clearRect(-canvasBall.width/2, -canvasBall.height/2,
                                canvasBall.width,    canvasBall.height);

         // STOP if reached end.
         count += 1;
         if(count > max) {clearInterval(intervalID)};

         // ROTATE image.
         contextBall.rotate(((Math.PI)/180)*change); 

         // DRAW image.
         contextBall.drawImage(ball,radius,0);
      }
   } 
}
</script>
</head>
<body>
  <div>
    <!-- CANVAS DEFINITIONS  -->
    <canvas id="canvasBall" width="400" height="400"
      style="border: 2px solid black; position: absolute; left: auto; top: auto; z-index: 2">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
    <canvas id="canvasBackground" width="400" height="400"
      style="border: 2px solid black; position: absolute; left: auto; top: auto; z-index: 1">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related