Post
Ask Question

Design Hexagon Using The HTML5 Tools

Introduction

 
This is a simple application developed in HTML 5 that shows how to draw a hexagon. We know that HTML is the client-side scripting language that helps display the data in a browser. HTML is the acronym for HyperText Markup Language. HTML 5 is the advanced version of HTML. A hexagon has an even number of sides; in a regular hexagon, the opposite sides are parallel. A regular hexagon is equal to the distance from the center to any vertex. HTML 5 is used to develop the 3D or animated application. This application is to help beginners draw a hexagon using HTML 5 tools.
 
Step 1 : Open Notepad or visual studio
  • Click->Start button->Notepad
  • Give the file a name of your choice
  • Click New button->save
  • There the name is "Hexagon.html"
notepad.gif
 
Step 2 : Create a Folder
  • Right-click of Desktop Screen-> New-> Folder
  • Name of Folder is "Tom"
  • Finally all HTML files and related sources are saved in that folder
 folder.gif
 
Step 3: Define the function named "Design" in which we define the area and fill the color of the hexagon.
 
Code
  1. function Design() {  
  2.             var canvas = document.getElementById('tutorial');  
  3.             if (canvas.getContext) {  
  4.                 var Tom = canvas.getContext('2d');  
  5.                 Tom.fillStyle = "#FF66CC";  
  6.                 Tom.beginPath();  
  7.                 Tom.moveTo(10, 60);  
  8.                 Tom.lineTo(40, 100);  
  9.                 Tom.lineTo(80, 100);  
  10.                 Tom.lineTo(110, 60);  
  11.                 Tom.lineTo(80, 20);  
  12.                 Tom.lineTo(40, 20);  
  13.                 Tom.fill();                                     
  14.                 Tom.fillStyle = "#660033";  
  15.                 Tom.beginPath();  
  16.                 Tom.moveTo(110, 160);  
  17.                 Tom.lineTo(140, 200);  
  18.                 Tom.lineTo(180, 200);  
  19.                 Tom.lineTo(210, 160);  
  20.                 Tom.lineTo(180, 120);  
  21.                 Tom.lineTo(140, 120);  
  22.                 Tom.fill();  
  23.             }  
  24.        }  
Step 4: Tthe complete code using the HTML 5 tools is given below:
 
Code
  1. <html>  
  2.     <head>  
  3.         <title>CShorporner canvas tutorial</title>  
  4.         <script type="text/javascript">  
  5.         function Design() {  
  6.             var canvas = document.getElementById('tutorial');  
  7.             if (canvas.getContext) {  
  8.                 var Tom = canvas.getContext('2d');  
  9.                 Tom.fillStyle = "#FF66CC";  
  10.                 Tom.beginPath();  
  11.                 Tom.moveTo(10, 60);  
  12.                 Tom.lineTo(40, 100);  
  13.                 Tom.lineTo(80, 100);  
  14.                 Tom.lineTo(110, 60);  
  15.                 Tom.lineTo(80, 20);  
  16.                 Tom.lineTo(40, 20);  
  17.                 Tom.fill();  
  18.                 Tom.fillStyle = "#660033";  
  19.                 Tom.beginPath();  
  20.                 Tom.moveTo(110, 160);  
  21.                 Tom.lineTo(140, 200);  
  22.                 Tom.lineTo(180, 200);  
  23.                 Tom.lineTo(210, 160);  
  24.                 Tom.lineTo(180, 120);  
  25.                 Tom.lineTo(140, 120);  
  26.                 Tom.fill();  
  27.             }  
  28.         }  
  29.     </script>  
  30.         <style type="text/css">  
  31.       canvas { border: 1px solid black; }  
  32.     </style>  
  33.     </head>  
  34.     <body onload="Design();">  
  35.         <canvas id="tutorial" width="300" height="300"></canvas>  
  36.     </body>  
  37. </html>  
 
4.gif
 
Step 5: In the next functionality we perform mouse over and mouse out events of the image using the HTML 5 tools. First, we define the on load function. In that function we set the mouse over and mouse out functionality.
 
Code
  1. <scrigetcontextt>  
  2.         function writeMessage(stage, message){  
  3.             var Mouse = stage.getcontext();  
  4.             stage.clear();  
  5.             Mouse.font = "18getcontextt Calibri";  
  6.             Mouse.fillStyle = "black";  
  7.             Mouse.fillText(message, 10, 25);  
  8.         }  
  9.         window.onload = function(){  
  10.             var stage = new Kinetic.Stage("container", 578, 200);  
  11.             var triangle = new Kinetic.Shagetcontexte(function(){  
  12.                var Mouse = this.getcontext();  
  13.                 Mouse.begingetcontextath();  
  14.                 Mouse.lineWidth = 4;  
  15.                 Mouse.strokeStyle = "black";  
  16.                 Mouse.fillStyle = "#8000FF";  
  17.                 Mouse.moveTo(120, 50);  
  18.                 Mouse.lineTo(250, 80);  
  19.                 Mouse.lineTo(150, 170);  
  20.                 Mouse.closegetcontextath();  
  21.                 Mouse.fill();  
  22.                 Mouse.stroke();  
  23.            });  
  24.            triangle.on("mouseout", function(){  
  25.                 writeMessage(stage, "Mouseout triangle");  
  26.             });  
  27.             triangle.on("mousemove", function(){  
  28.                 var mousegetcontextos = stage.getMousegetcontextos();  
  29.                 var x = mousegetcontextos.x - 120;  
  30.                 var y = mousegetcontextos.y - 50;  
  31.                 writeMessage(stage, "x: " + x + ", y: " + y);  
  32.             });  
  33.             stage.add(triangle);  
  34.             var circle = new Kinetic.Shagetcontexte(function(){  
  35.                 var canvas = this.getCanvas();  
  36.                 var Mouse = this.getcontext();  
  37.                 Mouse.begingetcontextath();  
  38.                 Mouse.arc(380, canvas.height / 2, 70, 0, Math.getcontextI * 2, true);  
  39.                 Mouse.fillStyle = "#00FFFF";  
  40.                 Mouse.fill();  
  41.                 Mouse.lineWidth = 4;  
  42.                 Mouse.stroke();  
  43.             });  
  44.             circle.on("mouseover", function(){  
  45.                 writeMessage(stage, "Hi  Manish.......");  
  46.             });  
  47.             circle.on("mouseout", function(){  
  48.                 writeMessage(stage, "Bye manish.....");  
  49.             });  
  50.              circle.on("mousedown", function(){  
  51.                 writeMessage(stage, "Mousedown circle");  
  52.             });  
  53.             circle.on("mouseugetcontext", function(){  
  54.                 writeMessage(stage, "Mouseugetcontext circle");  
  55.             });  
  56.             stage.add(circle);  
  57.         };  
  58.     </scrigetcontextt>  
Output
 
 1.gif
 
2.gif
 
3.gif
 
Resource


Similar Articles