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>
  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. });
  18. var layer = new Kinetic.Layer();
  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. });
  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. });
  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. });
  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.