HTML5 > Canvas Animation

Canvas Animation in HTML5

How to create the animation Frames using canvas HTML5


Canvas Animations 

Animation sare used in interactive and application devolopment, To create the animations in the canvas  canvas, We need the requestanimateframe of the window object which enables the browser to create the animation

Animating rectangle frame

 <h1 style="color:green;">Moves the rectangle animated frame towards right</h1>
    <canvas id="myCanvas" width="600" height="300"></canvas>
    <script>
        window.requestAnimFrame = (function (callback) {
            return window.requestAnimationFrame ||
                   window.webkitRequestAnimationFrame ||
                   window.mozRequestAnimationFrame ||
                   window.oRequestAnimationFrame ||
                   window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
        })();

        function drawRectangle(myRectangle, context) {
            context.beginPath();
            context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
            context.fillStyle = 'blue';
            context.fill();
            context.lineWidth = myRectangle.borderWidth;
            context.strokeStyle = 'red';
            context.stroke();
        }
        function animate(myRectangle, canvas, context, startTime) {
            var time = (new Date()).getTime() - startTime;
            var linearSpeed = 100;
            var newX = linearSpeed * time / 1000;
            if (newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
                myRectangle.x = newX;
            }
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawRectangle(myRectangle, context);
            requestAnimFrame(function () {
                animate(myRectangle, canvas, context, startTime);
            });
        }
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        var myRectangle = {
            x: 20,
            y: 50,
            width: 200,
            height: 100,
            borderWidth: 10
        };

        drawRectangle(myRectangle, context);
        setTimeout(function () {
            var startTime = (new Date()).getTime();
            animate(myRectangle, canvas, context, startTime);
        }, 1000);
    </script>

  • In the above code snippet we have defined the canvas animation with the frame moving rightwards
  • We have canvas element with width ="600", height ="300", id as "mycanvas".
  • In the nextline we are having the script tag to define the animation 
  • window.requestAnimFram(function (callback) - We are assigning the window.requestAnimframe to define the function (call back)
  • return window.requestAnimationFrame ||
  • window.webkitRequestAnimationFrame ||
  • window.mozRequestAnimationFrame ||
  • window.oRequestAnimationFrame ||
  • window.msRequestAnimationFrame ||
  •  - This defines the animation in different browsers 
  • In the nextline we are calling the function (call back) to window.setTimeout(callback, 1000 / 60); with the values as 1000/60
  • In the nextline we are having   function drawRectangle(myRectangle, context) as function draw rectangle which includes with myrectangle and context to define the rectangle size,  shape and color with the given values 
  • We are having the myrectangle values as x="20", y="50", width="200", height="100"
  • In the next step we are declaring another function as  function animate(myRectangle, canvas, context, startTime) which defines the function with myrectangle, canvas, context, starttime
  • In the nextline we are having  var time = (new Date()).getTime() - startTime; which is used to start the animation by checking the date, time.
  • var linearSpeed = 100; - It defines the animation speed with 100.
  • var newX = linearSpeed * time / 1000; - It defines the animation starting value from the x position with the time, speed.
  • In the next line we are giving the if condition as   if (newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) - It defines as if the newX value is less than the canvas width(600)-myrectangleborderwidth(10/2=5). It enters in to the myrectanglex=newx
  • context.clearRect(0, 0, canvas.width, canvas.height); - It defines the set the value of the rectangle in the canvas   
  • drawRectangle(myRectangle, context); - It Calls the function of drawrectangle with myrectangle, context
  • requestAnimFrame(function () {
  • animate(myRectangle, canvas, context, startTime);
  • }); - It calls the all the functions to animate the rectangle 
  • var canvas = document.getElementById('myCanvas'); - in this line we are giving the id as "mycanvas" 
  • var context = canvas.getContext('2d'); - It defines the context to the canvas
  • drawRectangle(myRectangle, context); - It calls the function drawrectangle
  • setTimeout(function () - It is the function as setTimeout(), In this function we have declared
  • var startTime = (new Date()).getTime(); - Start time with the new date to get date
  • animate(myRectangle, canvas, context, startTime);
  • }, 1000); -It calls the function to animate the function of the rectangle with the given values 

output

 Views: 691 | Post Order: 114



Write for us