Animation using css in HTML5

Gaurav Gupta
May 30, 2012
3k
0
0
Article

Introduction

In this Article we are going to see the use of Canvas tag in HTML5 for animation of games. The canvas tag is only available in HTML5. We can draw anything using JavaScript on Canvas element. The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.

The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. The Canvas element is supported by all the major browsers.

Here we will see the short demo of animation in HTML5 Canvas using JavaScript.

Step 1 Firstly we define a Canvas element in our HTML page.

<canvas id="canvas" width="1000" height="800"></canvas>

Here, we use some JavaScript code for draw animation.

Step 2 Create a function to get the Canvas element.

function dofirst()

{

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

canvas = x.getContext("2d");

}

Step 3 Associate the Event addEventListener on mousemove and set the function name with it.

window.addEventListener("mousemove", bucky, false);

Step 4 Define the function with canvas position and fill that in shape of rectangle. which create an animation effect.

function bucky(e)
{

// canvas.clearRect(0, 0, 600, 400);

var xpos = e.clientX;

var ypos = e.clientY;

canvas.fillRect(xpos-50, ypos-50, 100, 100);

}

Step 5 Call the function on window load.

window.addEventListener("load", dofirst, false);

Here is the Full Source Code

<head>

function dofirst()

{

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

canvas = x.getContext("2d");

window.addEventListener("mousemove", bucky, false);

}

function bucky(e) {

// canvas.clearRect(0, 0, 600, 400);

var xpos = e.clientX;

var ypos = e.clientY;

canvas.fillRect(xpos-50, ypos-50, 100, 100);

}

window.addEventListener("load", dofirst, false);

</script>

</head>

<body>

</body>

</html>

Output

Example 2: In this example we use some css transformation and transition to animate. we define a div rotate the div on mouse hover event using css transormation and transitions.

Here is code