Acceleration Animation in Canvas Using HTML5

Introduction

In this article we are going to understand Canvas Acceleration Animation using HTML5. In this section we will see the animated acceleration from upward to downward in the canvas while displaying in the browser. Here we will use some JavaScript and some styles along with HTML code. Just go through the steps to see how to create this application. In this article we use a rectangle to accrelerate top to down when the page is opened in the browser.

Let's see how the AccelerationAnimation application can be created. To do so use the following steps:

Step 1 : Open a HTML editor or Visual Studio 2010.

sd.gif

Open File menu ->select new ->Choose Empty Website then:

image 1.jpg

image 2.jpg

Step 2: This is where we will create the HTML5 application.

  • Go to the Solution Explorer
  • Right-click on the Application name
  • Select Add-->add new item
  • Now in the window that opens, select an HTML page or new Web form
  • Rename it.

image 3.jpg

Step 3: Write the code below in the .htm Page:

<html>

<head>

<style>

body

{

  margin: 0px;

  padding: 0px;

}

Canvas

{

   border: 2px solid #9C9ff8;

   margin-top: 50px;

   margin-left: 60px;

   background-color: #ffB2EE;

   box-shadow: 5px 5px 8px #222;

 }

.title

{

   text-align: center;

   font-family: Segoe UI Light, Arial, Helvetica;

   font-size: 2.2em;

   margin: 1em;

}

.info

{

   text-align: center;

   font-family: Segoe UI Light, Arial, Helvetica;

   font-size: 1.2em;

   margin: 0.25em;

}

</style>

</head>

<script type="text/javascript">

    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) {

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

        var context = canvas.getContext("2d");

        context.beginPath();

        context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);

        context.fillStyle = "#8ff6FF";

        context.fill();

        context.lineWidth = myRectangle.borderWidth;

        context.strokeStyle = "red";

        context.stroke();

    }

    function animate(lastTime, myRectangle) {

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

        var context = canvas.getContext("2d");

        // update

        var date = new Date();

        var time = date.getTime();

        var timeDiff = time - lastTime;

        var gravity = 2; // pixels / second^2

        var speedIncrementEachFrame = gravity * timeDiff / 1000; // pixels / second

        myRectangle.vy += speedIncrementEachFrame;

        myRectangle.y += (myRectangle.vy * timeDiff);

        if (myRectangle.y > canvas.height - myRectangle.height - myRectangle.borderWidth / 2) {

            myRectangle.y = canvas.height - myRectangle.height - myRectangle.borderWidth / 2;

        }

        lastTime = time;

        // clear

        context.clearRect(0, 0, canvas.width, canvas.height);

        // draw

        drawRectangle(myRectangle);

        // request new frame

        requestAnimFrame(function () {

            animate(lastTime, myRectangle);

        });

    }

    window.onload = function () {

        var myRectangle = {

            x: 239,

            y: 0,

            vx: 0,

            vy: 0,

            width: 100,

            height: 50,

            borderWidth: 5

        };

        drawRectangle(myRectangle);

        // wait one second before dropping rectangle

        setTimeout(function () {

            var date = new Date();

            var time = date.getTime();

            animate(time, myRectangle);

        }, 1000);

    };

</script>

<body style="background-color: #CCF87F">

    <center>

        <h1>

            Canvas Oscillation Animation

        </h1>

    </center>

    <hr />

<canvas id="myCanvas" width="400" height="300">Your browser does not support HTML5</canvas>

</body>

</html>

Step 4: Press F5 and you will get the output on the screen.

output 1.jpg

output 2.jpg

output 3.jpg

Next Recommended Readings