Post
Ask Question

Animation using css in HTML5

Introduction

 
In this article, we are going to see the use of the Canvas tag in HTML5 for the animation of games. The canvas tag is only available in HTML5. We can draw anything using JavaScript on the 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.
  1. <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
  1. function dofirst()  
  2. {  
  3.       var x = document.getElementById("canvas");  
  4.       canvas = x.getContext("2d");  
  5. }  
Step 3 Associate the Event addEventListener on mousemove and set the function name with it.
  1. window.addEventListener("mousemove", bucky, false);  
Step 4 Define the function with canvas position and fill that in shape of a rectangle. which creates an animation effect.
  1. function bucky(e)  
  2.  {  
  3. //                canvas.clearRect(0, 0, 600, 400);  
  4.          var xpos = e.clientX;  
  5.          var ypos = e.clientY;  
  6.          canvas.fillRect(xpos-50, ypos-50, 100, 100);  
  7.  }  
Step 5 Call the function on window load.
  1. window.addEventListener("load", dofirst, false);  
Here is the Full Source Code
  1. <html  
  2.     xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <title></title>  
  5.         <script type="text/javascript" language="javascript">  
  6.         function dofirst()  
  7.         {  
  8.             var x = document.getElementById("canvas");  
  9.             canvas = x.getContext("2d");  
  10.             window.addEventListener("mousemove", bucky, false);  
  11.             }  
  12.             function bucky(e) {  
  13. //                canvas.clearRect(0, 0, 600, 400);  
  14.                 var xpos = e.clientX;  
  15.                 var ypos = e.clientY;  
  16.                 canvas.fillRect(xpos-50, ypos-50, 100, 100);  
  17.             }  
  18.             window.addEventListener("load", dofirst, false);  
  19. </script>  
  20.     </head>  
  21.     <body>  
  22.         <canvas id="canvas" width="1000" height="800"></canvas>  
  23.     </body>  
  24. </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 transformations and transitions.
 
Here is code
  1. <html  
  2.     xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head runat="server">  
  4.         <title></title>  
  5.         <style>  
  6.     #box  
  7.     {  
  8.           display:block;  
  9.         width:500px;  
  10.         margin:50px auto;  
  11.         text-align:center;  
  12.         border:7px solid blue;  
  13.         background:yellow;  
  14.         outline:7px solid red;  
  15.   -moz-transform: rotateZ(5deg);  
  16.   -moz-transition: -webkit-transform 2s ease-in-out;  
  17. }  
  18. #box:hover{  
  19.   -moz-transform:rotateZ(180deg); 
  20. }  
  21.    </style>  
  22.     </head>  
  23.     <body>  
  24.         <form id="form1" runat="server">  
  25.             <div id="box"></div>  
  26.         </form>  
  27.     </body>  
  28. </html>  
Output
 
Clipboard02.jpg
 
After mouse-hover on the div
 
Clipboard04.jpg


Similar Articles