Create a 3D Cube on 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 a 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 a HTML 5 application. I hope this article helps to Create a 3D cube on a Canvas Using HTML5 tools.

Step 1: First open a HTML editor such as Notepad.

  • Open start->Notepad.
  • The name of editor is "slide".

wakakakakak.gif

Step 2:
Create a Folder on a desktop.

  • Right-click on desktop->new->Folder.
  • Name of folder is "Tom".

folder.gif

Step 3:
Open Visual Studio.

  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "cube.aspx".

new.gif

webapplication.gif

Step 4:
Add a 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 a color and background color of a page.

Code  

body *
 {

    font-family:Verdana;

    font-size: 24px;

  }

  body.red
 {

    background-color:Orange;

    color:Green;

  }

  body.sky
 {

    background-color:Green;

    color:Orange;

  }

   body.sky a:link,   body.sky a:visited,   body.sky a:hover,   body.sky a:active
 
{

    color:Orange;

  }

    body.red a:link,   body.red a:visited,   body.red a:hover,   body.red a:active
 {

    color:Green;

  }

  span.spaceyspan { margin-right: 20px; }

  div.centeredDiv { text-align: center; }

  li { list-style: none; }

  td { padding-right: 10px; }

</style>

 

Step 6: Now in this step we set one HTML5 tool named canvas and set a height and width of a canvas.

 

Code

 

<body class="sky">

   <div class="centeredDiv" style="background-color: #FF99CC">

   <canvas id="canvas" width="700" height="600">

   This is a cube perform a 3D functinality

  </canvas>

</div>


Step 7:  Now in this step we define a table content that presses a content after that performs an action.

 

Code

 

<table>

  <tr><td>PRESS t</td><td>&rarr;</td><td>Change a color of background</td></tr>

  <tr><td>PRESS p</td><td>&rarr;</td><td>Perform a pouse functionality</td></tr>

  <tr><td>MOUSE</td><td>&rarr;</td><td>Rotate a cube</td></tr>

  <tr><td>MOUSE + CTRL</td><td>&rarr;</td><td>pan a cube</td></tr>

  <tr><td>MOUSE + SHIFT</td><td>&rarr;</td><td>pan cune on z</td></tr>

  <tr><td>MOUSE + CTRL + SHIFT</td><td>&rarr;</td><td>Adjust a length</td></tr>

</table>

<script type="text/javascript">

    try
   {

        var pageTracker = _gat._getTracker("UA-8603987-1");

        pageTracker._trackPageview();

    } catch (err) { }
</
script>


BODY.gif

Step 8: The c
omplete image of the Democube application is given below.

 COMPLETEAPPLICATION.gif

Step 9:
Complete code of cube demo application is given below.

 

Code

 

<html>

  <head>

  <title>Tom application</title>

  <style type="text/css">

  body *
  {

    font-family:Verdana;

    font-size: 24px;

   }

   body.red
  {

    background-color:Orange;

    color:Green;

  }

  body.sky
  {

    background-color:Green;

    color:Orange;

   }

   body.sky a:link,   body.sky a:visited,   body.sky a:hover,   body.sky a:active
 
  {

    color:Orange;

   }

    body.red a:link,   body.red a:visited,   body.red a:hover,   body.red a:active
  {

    color:Green;

   }

  span.spaceyspan { margin-right: 20px; }

  div.centeredDiv { text-align: center; }

  li { list-style: none; }

  td { padding-right: 10px; }

  </style>

  <body class="sky">
  <div class="centeredDiv" style="background-color: #FF99CC">
  <canvas id="canvas" width="700" height="600">
   This is a cube perform a 3D functinality
  </canvas>
</
div>
 
<table>
  <
tr><td>PRESS t</td><td>&rarr;</td><td>Change a color of background</td></tr>
  <
tr><td>PRESS p</td><td>&rarr;</td><td>Perform a pouse functionality</td></tr>
  <tr><td>MOUSE</td><td>&rarr;</td><td>Rotate a cube</td></tr>
  <tr><td>MOUSE + CTRL</td><td>&rarr;</td><td>pan a cube</td></tr>
  <tr><td>MOUSE + SHIFT</td><td>&rarr;</td><td>pan cune on z</td></tr>
  <tr><td>MOUSE + CTRL + SHIFT</td><td>&rarr;</td><td>Adjust a length</td></tr>
 </table>
 <
script type="text/javascript">
    try
   {
        var pageTracker = _gat._getTracker("UA-8603987-1");
        pageTracker._trackPageview();
    } catch (err) { }
</script>
</body>
</
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 is some useful resources

Up Next
    Ebook Download
    View all
    Learn
    View all