Post
Ask Question

Create an Animated Rotating Rectangle on Canvas Using HTML5

Introduction

This is a simple application for beginners that shows how to create an animated rotating rectangle on canvas using HTML5. We know that HTML 5 is the advanced version of HTML. Basically, HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to create an animated rotating rectangle on canvas application. <canvas> is an HTML element which can be used to draw graphics using scripting. It can be used to draw graphs to make photo compositions or do simple animations. The <canvas> element is a bitmap drawing API and once you have committed to a set of pixels you are stuck with them. Canvas is an important tag of a HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to create an animated rotating rectangle on canvas using HTML5 tools.
 
Step 1: First open a HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of editor is "Rotation".
wakakakakak.gif
 
Step 2: Create a folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "Sam".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "Rectengle.aspx".
new.gif
 
webapplication.gif
 
Step 4: Add an HTML file to your web application.
  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Animation.html".
html.gif
 
Step 5: Now in this step we set a style used to set a border and body of a canvas.
 
Code
  1. <style type="text/css">  
  2.        body  
  3.    {  
  4.         margin: 10px;  
  5.         padding: 10px;  
  6.              }  
  7.        #myCanvas  
  8.     {  
  9.        border: 1px solid #00ff99;  
  10.        background-color:Green;  
  11.         }  
  12. </style>  
Step 6: Now in this step we set a rectangle height width and set a color of a rectangle.
 
Code
  1. var BR = new Kinetic.Rect(  
  2.      {  
  3.       x: 50,  
  4.       y: 75,  
  5.       width: 100,  
  6.       height: 50,  
  7.       fill: "#ff66ff",  
  8.       stroke: "black",  
  9.       strokeWidth: 4  
  10.          });  
  11.      var YR = new Kinetic.Rect({  
  12.      x: 220,  
  13.      y: 75,  
  14.      width: 100,  
  15.      height: 50,  
  16.      fill: "#0000a0",  
  17.      stroke: "black",  
  18.      strokeWidth: 4,  
  19.      centerOffset: {  
  20.      x: 50,  
  21.      y: 25  
  22.           }  
  23.         });  
  24.     var RR = new Kinetic.Rect({  
  25.     x: 400,  
  26.     y: 75,  
  27.     width: 100,  
  28.     height: 50,  
  29.     fill: "#ff8080",  
  30.     stroke: "black",  
  31.     strokeWidth: 4,  
  32.     centerOffset: {  
  33.       x: -100,  
  34.       y: 0  
  35.        }  
  36.  }); 
Step 7:  Now in this step we add a rectangle color on a layer.
 
Code
  1.  L.add(BR);  
  2.    L.add(YR);  
  3.    L.add(RR);  
  4.    stage.add(L);  
  5.    stage.onFrame(function (frame)  
  6.     {  
  7.    BR.rotate(Math.PI / 100);  
  8.    YR.rotate(Math.PI / 100);  
  9.    RR.rotate(Math.PI / 100);  
  10.    L.draw();  
  11. }); 
Step 8:  The demo of complete application code is given below.
 
Code
  1. <html>  
  2.   <head>  
  3.   <title>Tom application</title>  
  4.   <style type="text/css">  
  5.        body  
  6.    {  
  7.         margin: 10px;  
  8.         padding: 10px;  
  9.              }  
  10.        #myCanvas  
  11.     {  
  12.        border: 1px solid #00ff99;  
  13.        background-color:Green;  
  14.         }  
  15.   </style>  
  16.  <script type="text/jscript" src="Scripts/JScript.js">  
  17.  </script>  
  18.  <script type="text/javascript">  
  19.   window.onload = function ()  
  20.    {  
  21.   var stage = new Kinetic.Stage("container", 600, 300);  
  22.   var L = new Kinetic.L();   
  23.   var BR = new Kinetic.Rect(  
  24.      {  
  25.       x: 50,  
  26.       y: 75,  
  27.       width: 100,  
  28.       height: 50,  
  29.       fill: "#ff66ff",  
  30.       stroke: "black",  
  31.       strokeWidth: 4  
  32.          });  
  33.      var YR = new Kinetic.Rect({  
  34.      x: 220,  
  35.      y: 75,  
  36.      width: 100,  
  37.      height: 50,  
  38.      fill: "#0000a0",  
  39.      stroke: "black",  
  40.      strokeWidth: 4,  
  41.      centerOffset: {  
  42.      x: 50,  
  43.      y: 25  
  44.           }  
  45.         });  
  46.     var RR = new Kinetic.Rect({  
  47.     x: 400,  
  48.     y: 75,  
  49.     width: 100,  
  50.     height: 50,  
  51.     fill: "#ff8080",  
  52.     stroke: "black",  
  53.     strokeWidth: 4,  
  54.     centerOffset: {  
  55.       x: -100,  
  56.       y: 0  
  57.        }  
  58.  });  
  59.  L.add(BR);  
  60.    L.add(YR);  
  61.    L.add(RR);  
  62.    stage.add(L);  
  63.    stage.onFrame(function (frame)  
  64.     {  
  65.    BR.rotate(Math.PI / 100);  
  66.    YR.rotate(Math.PI / 100);  
  67.    RR.rotate(Math.PI / 100);  
  68.    L.draw();  
  69.    });  
  70.   </script>  
  71.   </head>  
  72.    <body onmousedown="return false;" bgcolor="#400000">  
  73.    <h1 style="background-color: #8080FF">Tom developed a Rotated Rectangle</h1>  
  74.     <div id="container">  
  75.     </div>  
  76.     </body>  
  77. </html> 
Step 9: Press Ctrl+ F5 to run the code in a browser.
 
Output
 
2.gif
 
3.gif
 
1.gif
 
4.gif
 
Resources
 
Here is some useful resources


Similar Articles