HTML CODE
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#tango {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
}
#container {
background-image: url('http://www.html5canvastutorials.com/demos/assets/map-background.png');
display: inline-block;
overflow: hidden;
height: 262px;
width: 580px;
background-position: 1px 1px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.5.js"></script>
<script src="http://www.html5canvastutorials.com/demos/assets/worldMap.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 260
});
var mapLayer = new Kinetic.Layer({
y: 20,
scale: 0.6
});
/*
* loop through country data stroed in the worldMap
* variable defined in the worldMap.js asset
*/
for(var key in worldMap.shapes) {
var path = new Kinetic.Path({
data: worldMap.shapes[key],
fill: '#eee',
stroke: '#555',
strokeWidth: 1
});
path.on('mouseover', function() {
this.setFill('red');
mapLayer.drawScene();
});
path.on('mouseout', function() {
this.setFill('#eee');
mapLayer.drawScene();
});
mapLayer.add(path);
}
stage.add(mapLayer);
</script>
</body>
</html>
演示：http://www.html5canvastutorials.com/demos/labs/html5-canvas-world-map-svg-path-with-kineticjs/index.php
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。