HTML5 Canvas SVG路徑與KineticJS世界地圖，夠有意思！
阿新 • • 發佈：2019-01-27
這個實驗證明了SVG路徑功能的KineticJS通過生成一個互動式地圖從一個SVG資料來源。
產品說明:滑鼠懸停在這個國家
產品說明:滑鼠懸停在這個國家
<!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://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script> <script src="http://www.html5canvastutorials.com/demos/assets/worldMap.js"></script> <script defer="defer"> var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 260 }); var mapLayer = new Kinetic.Layer({ y: 20, scale: 0.6 }); var topLayer = 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('#111'); this.moveTo(topLayer); topLayer.drawScene(); }); path.on('mouseout', function() { this.setFill('#eee'); this.moveTo(mapLayer); topLayer.draw(); }); mapLayer.add(path); } stage.add(mapLayer); stage.add(topLayer); </script> </body> </html>