Post
Ask Question

Draw Spline in HTML5

Introduction

 
In this article, we draw a Spline 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 your application the name "Draw_Spline" and then click "Ok".
 
Step 2
 
Add the kinetic_beta.js file. After this session the project has 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. 
 
solution-explorer.jpg
 
Coding
 
Draw_Spline.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.      
  6. </head>  
  7. <body>  
  8. <h3> Draw Spline in HTML5 </h3>  
  9.   <div id="container"></div>  
  10.     <script src="Kinetic_beta.js" type="text/javascript"></script>  
  11.     <script>  
  12.         var stage = new Kinetic.Stage({  
  13.             container: 'container',  
  14.             width: 578,  
  15.             height: 200  
  16.         });  
  17.    
  18.         var layer = new Kinetic.Layer();  
  19.    
  20.         var blueSpline = new Kinetic.Spline({  
  21.             points: [{  
  22.                 x: 93,  
  23.                 y: 180  
  24.             }, {  
  25.                 x: 240,  
  26.                 y: 53  
  27.             }, {  
  28.                 x: 500,  
  29.                 y: 209  
  30.             }, {  
  31.                 x: 350,  
  32.                 y: 129  
  33.             }],  
  34.             stroke: '#0066FF',  
  35.             strokeWidth: 10,  
  36.             lineCap: 'round',  
  37.             tension: 1  
  38.         });  
  39.    
  40.         var redSpline = new Kinetic.Spline({  
  41.             points: [{  
  42.                 x: 173,  
  43.                 y: 180  
  44.             }, {  
  45.                 x: 370,  
  46.                 y: 43  
  47.             }, {  
  48.                 x: 500,  
  49.                 y: 129  
  50.             }, {  
  51.                 x: 300,  
  52.                 y: 129  
  53.             }],  
  54.             stroke: '#663300',  
  55.             strokeWidth: 10,  
  56.             lineCap: 'round',  
  57.             tension: 0.5  
  58.         });  
  59.    
  60.         var greenSpline = new Kinetic.Spline({  
  61.             points: [{  
  62.                 x: 20,  
  63.                 y: 50  
  64.             }, {  
  65.                 x: 340,  
  66.                 y: 50  
  67.             }, {  
  68.                 x: 200,  
  69.                 y: 150  
  70.             }, {  
  71.                 x: 250,  
  72.                 y: 150  
  73.             }],  
  74.             stroke: '#006600',  
  75.             strokeWidth: 5,  
  76.             lineCap: 'round',  
  77.             tension: 1,  
  78.             dashArray: [10, 10]  
  79.         });  
  80.    
  81.         layer.add(blueSpline);  
  82.         layer.add(redSpline);  
  83.         layer.add(greenSpline);  
  84.         stage.add(layer);  
  85.         </script>  
  86. </body>  
  87. </html> 
Output  
 
spline.jpg
 
For more information, download the attached sample application.


Similar Articles