创建一个插值样条kineticjs,我们可以实例化一个对象spline()动力学。样条曲线与点的数组定义的,和一个控制插值的后天张力。对于一个完整的方法和属性的列表,检查出的动力学。样条的文件。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var blueSpline = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
tension: 1
});
var redSpline = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
stroke: 'red',
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: 'green',
strokeWidth: 5,
lineCap: 'round',
tension: 1,
dashArray: [10, 10]
});
layer.add(blueSpline);
layer.add(redSpline);
layer.add(greenSpline);
stage.add(layer);
</script>
</body>
</html>