HTML5 Canvas World Map

Share kali ini saya tidak memberikan tutorial lengkap. HTML5 canvas peta dunia (world map) hanya untuk menghiasi blog saja.
berikut HTML,CSS dan javascript yang di gunakan.
DEMO
HTML Markup yang di gunakan pakai id="container" .
<div id="container"></div>
rubah tampilan jika anda kurang menyukai warna dan CSS nya.
canvas {
        border: 1px solid #9C9898;
      }
      #tango {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 10px;
      }
      #container {
        background-image: url('https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/map-background.png');
        display: inline-block;
        overflow: hidden;
        height: 262px;
        width: 580px;
        background-position: 1px 1px;
      }
gunakan semua javascript di bawah ini tanpa mengurangi satu code pun .
<script src="https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/kinetic-v3.10.4.js"></script>
<script src="https://css3-tutsplus.googlecode.com/svn/trunk/HTML5-Canvas-Word-Map/worldMap.js"></script>
Atur lebar dan tinggi pada script sesuai keinginan. jika pada template ada id="container" yang sama maka anda bisa ganti pada script di bawah ini.
<script type='text/javascript'>
//<![CDATA[
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 260
        });
        var mapLayer = new Kinetic.Layer({
          y: 20,
          scale: 0.6
        });
        for(var key in worldMap.shapes) {
          var path = new Kinetic.Path({
            data: worldMap.shapes[key],
            fill: '#ccc',
            stroke: '#555',
            strokeWidth: 1
          });
          path.on('mouseover', function() {
            this.setFill('red');
            mapLayer.draw();
          });
          path.on('mouseout', function() {
            this.setFill('#ccc');
            mapLayer.draw();
          });
          mapLayer.add(path);
        }
        stage.add(mapLayer);
      };
//]]>
</script>




Post By : denzdii
Reference : HTML5 Canvas

1 comments:

  1. Thank you for sharing this code. I have used it for my custom essays and received A+. Thank you for your help!

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top