代码说明:拖拽形状和按“tango”按钮使形状移动。刷新页面生成新的随机形状。
其它的话也不多说啦,大家可能等着看代码啦,其实,觉得有点难哦,我也在学习哦。呵呵。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
#tango {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
}
#container {
background-image: url("http://www.html5canvastutorials.com/demos/assets/blue-background.jpg");
display: inline-block;
overflow: hidden;
height: 365px;
width: 580px;
}
</style>
</head>
<body οnmοusedοwn="return false;">
<div id="container"></div>
<input type="button" id="tango" value="Tango!">
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<script defer="defer">
var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
function getRandomColor() {
return colors[Math.round(Math.random() * 5)];
}
function tango(layer) {
var color = Kinetic.Util.getRGB(getRandomColor());
for(var n = 0; n < layer.getChildren().length; n++) {
var shape = layer.getChildren()[n];
var stage = shape.getStage();
var radius = Math.random() * 100 + 20;
new Kinetic.Tween({
node: shape,
duration: 1,
x: Math.random() * stage.getWidth(),
y: Math.random() * stage.getHeight(),
rotation: Math.random() * Math.PI * 2,
radius: radius,
opacity: (radius - 20) / 100,
easing: Kinetic.Easings.EaseInOut,
fillR: color.r,
fillG: color.g,
fillB: color.b
}).play();
}
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 363
});
var layer = new Kinetic.Layer();
for(var n = 0; n < 10; n++) {
var radius = Math.random() * 100 + 20;
var shape = new Kinetic.RegularPolygon({
x: Math.random() * stage.getWidth(),
y: Math.random() * stage.getHeight(),
sides: Math.ceil(Math.random() * 5 + 3),
radius: radius,
fill: getRandomColor(),
opacity: (radius - 20) / 100,
draggable: true
});
layer.add(shape);
}
stage.add(layer);
document.getElementById('tango').addEventListener('click', function() {
tango(layer);
}, false);
</script>
</body>
</html>