In this article, we draw a Spline in HTML.
First we download the file in the following attachment:
-
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h3> Draw Spline in HTML5 </h3>
<div id="container"></div>
<script src="Kinetic_beta.js" type="text/javascript"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var blueSpline = new Kinetic.Spline({
points: [{
x: 93,
y: 180
}, {
x: 240,
y: 53
}, {
x: 500,
y: 209
}, {
x: 350,
y: 129
}],
stroke: '#0066FF',
strokeWidth: 10,
lineCap: 'round',
tension: 1
});
var redSpline = new Kinetic.Spline({
points: [{
x: 173,
y: 180
}, {
x: 370,
y: 43
}, {
x: 500,
y: 129
}, {
x: 300,
y: 129
}],
stroke: '#663300',
strokeWidth: 10,
lineCap: 'round',
tension: 0.5
});
var greenSpline = new Kinetic.Spline({
points: [{
x: 20,
y: 50
}, {
x: 340,
y: 50
}, {
x: 200,
y: 150
}, {
x: 250,
y: 150
}],
stroke: '#006600',
strokeWidth: 5,
lineCap: 'round',
tension: 1,
dashArray: [10, 10]
});
layer.add(blueSpline);
layer.add(redSpline);
layer.add(greenSpline);
stage.add(layer);
</script>
</body>
</html>
Output
![spline.jpg]()
For more information, download the attached sample application.