Create a 3D Cube on Canvas Using HTML5

This is a simple application for beginners that shows how to create a 3D cube on a canvas using HTML5.

Introduction

 
This is a simple application for beginners that shows how to create a 3D cube on a 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 develop a 3D cube on canvas applications. The <canvas> tag is an HTML element which can be used to draw graphics using scripting. It can be used to draw graphs, 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 HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to Create a 3D cube on a Canvas Using HTML5 tools.
 
Step 1: First open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "slide".
wakakakakak.gif
 
Step 2: Create a Folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "Tom".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "cube.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 "Democube.html".
html.gif
 
Step 5: Now in this step we apply a style of cube page. Set the color and background color of a page.
 
Code 
  1. body *  {  
  2.     font-family:Verdana;  
  3.     font-size24px;  
  4.   }  
  5.   body.red  {  
  6.     background-color:Orange;  
  7.     color:Green;  
  8.   }  
  9.   body.sky  {  
  10.     background-color:Green;  
  11.     color:Orange;  
  12.   }  
  13.    body.sky a:link,   body.sky a:visited,   body.sky a:hover,   body.sky a:active   {  
  14.     color:Orange;  
  15.   }  
  16.     body.red a:link,   body.red a:visited,   body.red a:hover,   body.red a:active  {  
  17.     color:Green;  
  18.   }  
  19.   span.spaceyspan { margin-right20px; }  
  20.   div.centeredDiv { text-aligncenter; }  
  21.   li { list-stylenone; }  
  22.   td { padding-right10px; }  
  23. </style>   
Step 6: Now in this step we set one HTML5 tool named canvas and set a height and width of a canvas.
 
Code
  1. <body class="sky">  
  2.    <div class="centeredDiv" style="background-color: #FF99CC">  
  3.    <canvas id="canvas" width="700" height="600">  
  4.    This is a cube perform a 3D functinality  
  5.   </canvas>  
  6. </div> 
Step 7:  Now in this step we define a table content that presses a content after that performs an action.
 
Code
  1. <table>  
  2.   <tr><td>PRESS t</td><td>→</td><td>Change a color of background</td></tr>  
  3.   <tr><td>PRESS p</td><td>→</td><td>Perform a pouse functionality</td></tr>  
  4.   <tr><td>MOUSE</td><td>→</td><td>Rotate a cube</td></tr>  
  5.   <tr><td>MOUSE + CTRL</td><td>→</td><td>pan a cube</td></tr>  
  6.   <tr><td>MOUSE + SHIFT</td><td>→</td><td>pan cune on z</td></tr>  
  7.   <tr><td>MOUSE + CTRL + SHIFT</td><td>→</td><td>Adjust a length</td></tr>  
  8. </table>  
  9. <script type="text/javascript">  
  10.     try    {  
  11.         var pageTracker = _gat._getTracker("UA-8603987-1");  
  12.         pageTracker._trackPageview();  
  13.     } catch (err) { }   
  14. </script> 
BODY.gif
 
Step 8: The complete image of the Democube application is given below.
 
COMPLETEAPPLICATION.gif
 
Step 9: Complete code of the cube demo application is given below.
 
Code
  1. <html>    
  2.   <head>      
  3.   <title>Tom application</title>      
  4.   <style type="text/css">    
  5.   body *    
  6.   {    
  7.     font-family:Verdana;    
  8.     font-size24px;    
  9.    }    
  10.    body.red    
  11.   {    
  12.     background-color:Orange;    
  13.     color:Green;    
  14.   }     
  15.   body.sky    
  16.   {      
  17.     background-color:Green;      
  18.     color:Orange;      
  19.    }      
  20.    body.sky a:link,   body.sky a:visited,   body.sky a:hover,   body.sky a:active    
  21.    {      
  22.     color:Orange;      
  23.    }      
  24.     body.red a:link,   body.red a:visited,   body.red a:hover,   body.red a:active    
  25.   {      
  26.     color:Green;      
  27.    }      
  28.   span.spaceyspan { margin-right20px; }      
  29.   div.centeredDiv { text-aligncenter; }      
  30.   li { list-stylenone; }      
  31.   td { padding-right10px; }      
  32.   </style>      
  33.   <body class="sky">    
  34.   <div class="centeredDiv" style="background-color: #FF99CC">    
  35.   <canvas id="canvas" width="700" height="600">    
  36.    This is a cube perform a 3D functinality    
  37.   </canvas>    
  38. </div>    
  39.  <table>    
  40.   <tr><td>PRESS t</td><td>→</td><td>Change a color of background</td></tr>    
  41.   <tr><td>PRESS p</td><td>→</td><td>Perform a pouse functionality</td></tr>    
  42.   <tr><td>MOUSE</td><td>→</td><td>Rotate a cube</td></tr>    
  43.   <tr><td>MOUSE + CTRL</td><td>→</td><td>pan a cube</td></tr>    
  44.   <tr><td>MOUSE + SHIFT</td><td>→</td><td>pan cune on z</td></tr>    
  45.   <tr><td>MOUSE + CTRL + SHIFT</td><td>→</td><td>Adjust a length</td></tr>    
  46.  </table>    
  47.  <script type="text/javascript">    
  48.     try    
  49.    {    
  50.         var pageTracker = _gat._getTracker("UA-8603987-1");    
  51.         pageTracker._trackPageview();    
  52.     } catch (err) { }    
  53. </script>    
  54. </body>    
  55. </html>   
Step 10: Press Ctrl + F5 to run the application in a browser.
 
Output
 
7.gif
 
 
8.gif
 
Press the t1 tag; the background color of the cube will change.
 
5.gif
 
 
6.gif
 
Resources
 
Here are some useful resources