直接看代码哦:
<!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.7.4.min.js"></script>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function drawImages(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
// darth vader
var width = 200;
var height = 137;
var darthVaderImg = new Kinetic.Image({
image: images.darthVader,
offset: [width / 2, height / 2],
width: width,
height: height
});
darthVaderImg.on('mouseover', function() {
this.setScale(1.2);
stage.draw();
});
darthVaderImg.on('mouseout', function() {
this.setScale(1);
stage.draw();
});
darthVaderImg.setPosition(200, 100);
layer.add(darthVaderImg);
// yoda
var width = 93;
var height = 104;
var yodaImg = new Kinetic.Image({
image: images.yoda,
offset: [width / 2, height / 2],
width: width,
height: height
});
yodaImg.on('mouseover', function() {
this.setScale(1.2);
stage.draw();
});
yodaImg.on('mouseout', function() {
this.setScale(1);
stage.draw();
});
yodaImg.setPosition(400, 100);
layer.add(yodaImg);
stage.add(layer);
}
var sources = {
darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
};
loadImages(sources, drawImages);
</script>
</body>
</html>