Post
Ask Question

Draw Ellipse in HTML5

Introduction

 
In this article, we draw an Ellipse in HTML.
 
First, we download the file in the following attachment:
  1. Kinectic_beta.js
These files are added to the project then use the following procedure.
 
Step 1
 
Open Visual Studio 2010 and click "File" -> "New" -> "Website...". A window is opened. In this window give the name of your application as "Draw_Ellipse" and then click "Ok".
 
Step 2
 
Add a "kinetic_beta.js" file. The project will then have been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the js file and HTML file.
 
explorer.jpg
 
Coding
 
Draw_Ellipse.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>    
  5. </head>  
  6. <body>  
  7. <h3>        Draw Ellipse in HTML5 </h3>  
  8.   <div id="container"></div>  
  9.     <script src="Kinetic_beta.js" type="text/javascript"></script>  
  10.     <script>  
  11.         var stage = new Kinetic.Stage({  
  12.             container: 'container',  
  13.             width: 308,  
  14.             height: 200  
  15.         });  
  16.         var layer = new Kinetic.Layer();  
  17.         var ellipse = new Kinetic.Ellipse({  
  18.             x: stage.getWidth() / 2,  
  19.             y: stage.getHeight() / 2,  
  20.             radius: {  
  21.                 x: 120,  
  22.                 y: 70  
  23.             },  
  24.             fill: 'blue',  
  25.             stroke: 'black',  
  26.             strokeWidth: 4  
  27.         });  
  28.         // add the shape to the layer  
  29.         layer.add(ellipse);  
  30.    
  31.         // add the layer to the stage  
  32.         stage.add(layer);  
  33.         </script>  
  34. </body>  
  35. </html> 
Output  
 
result.jpg
  
For more information, download the attached sample application.


Similar Articles