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
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script
type="text/javascript"
language="javascript">
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>
<canvas
id="canvas"
width="1000"
height="800"></canvas>
</body>
</html>
Output
![1.jpg]()
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
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title></title>
<style>
#box
{
display:block;
width:500px;
margin:50px
auto;
text-align:center;
border:7px
solid blue;
background:yellow;
outline:7px
solid red;
-moz-transform:
rotateZ(5deg);
-moz-transition:
-webkit-transform
2s ease-in-out;
}
#box:hover{
-moz-transform:rotateZ(180deg);
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<div
id="box">
</div>
</form>
</body>
</html>
Output
![Clipboard02.jpg]()
After mousehover on the div
![Clipboard04.jpg]()