Basic animation in javascript

     The following javascript program will show to create a simple animation in canvas. Canvas is included in HTML5 technology and it will support all latest web browsers.

     First we have to create a canvas, using <canvas> tag and set the width and height for the canvas.

<div id="container">

    <canvas id="myCanvas" height="450" width="450"></canvas>

</div>

     Containing the context identifier defining the drawing context associated to the canvas using the getContext("2d") method.

  var mainCanvas = document.getElementById("myCanvas");

  var mainContext = mainCanvas.getContext('2d');

     Store the width and height of the canvas using width and height property, and set the Frame per Seconds (FPS) of the animation and angle. If you want to increase the speed of the animation you can set minimum value to FPS variable.

  var canvasWidth = mainCanvas.width;

  var canvasHeight = mainCanvas.height;

  var angle = 0;

  var FPS = 10;

     The draw() function contain, increase the angle size and radius for animation.

function drawCircle() {

    mainContext.clearRect(0, 0, canvasWidth, canvasHeight);

 

    // color in the background

    mainContext.fillStyle = "black";

    mainContext.fillRect(0, 0, canvasWidth, canvasHeight);



    // draw the circle

    mainContext.beginPath();



    var radius =25 + 150 * Math.abs(Math.cos(angle));

    mainContext.arc(225, 225, radius, 0, Math.PI * 2, false);

    mainContext.closePath();



    // color in the circle

    mainContext.fillStyle = "green";

    mainContext.fill();



    angle += Math.PI / 64;



 setTimeout(function(){drawCircle();},FPS); //Call the function again and again

}

Example Program:- (Editor)

Editor is Loading...

Output:-

Advertisement