HTML5画布行星图像映射

来源：互联网发布：js取绝对值函数编辑：程序博客网时间：2024/05/16 01:30
说明:鼠标行星看到他们的名字和使用复选框来显示和隐藏地图叠加。
<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;        font-family: Calibri;      }      #page {        position: relative;        width: 580px;        height: 253px;      }      #controls {        position: absolute;        right: 10px;        top: 10px;        z-index: 99999;      }      label {        color: white;        vertical-align: top;      }    </style>  </head>  <body>    <div id="page">      <div id="container"></div>      <div id="controls">        <input type="checkbox" id="checkbox">        <label> Show map overlay </label>      </div>    </div>    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>    <script>      function writeMessage(message) {        text.setText(message);        messageLayer.draw();      }            var stage = new Kinetic.Stage({        container: 'container',        width: 578,        height: 251      });            var layer = new Kinetic.Layer();      var text = new Kinetic.Text({        x: 10,        y: 10,        fontFamily: 'Calibri',        fontSize: 24,        text: '',        fill: 'white'      });      var planetsLayer = new Kinetic.Layer();      var circlesLayer = new Kinetic.Layer();      var messageLayer = new Kinetic.Layer();      var planets = {        Mercury: {          x: 46,          y: 126,          radius: 32        },        Venus: {          x: 179,          y: 126,          radius: 79        },        Earth: {          x: 366,          y: 127,          radius: 85        },        Mars: {          x: 515,          y: 127,          radius: 45        }      };      var imageObj = new Image();      imageObj.onload = function() {        // draw shape overlays        for(var pubKey in planets) {( function() {            var key = pubKey;            var planet = planets[key];            var planetOverlay = new Kinetic.Circle({              x: planet.x,              y: planet.y,              radius: planet.radius            });            planetOverlay.on('mouseover', function() {              writeMessage(key);            });            planetOverlay.on('mouseout', function() {              writeMessage('');            });            circlesLayer.add(planetOverlay);          }());        }        var checkbox = document.getElementById('checkbox');        checkbox.addEventListener('click', function() {          var shapes = circlesLayer.getChildren();          // flip show property          for(var n = 0; n < shapes.length; n++) {            var shape = shapes[n];            var f = shape.getFill();            shape.setFill(f == 'red' ? null : 'red');          }          circlesLayer.draw();        }, false);        messageLayer.add(text);        stage.add(planetsLayer);        stage.add(circlesLayer);        stage.add(messageLayer);        // draw planets        var planetsContext = planetsLayer.getContext();        planetsContext.drawImage(imageObj, 0, 0);      };      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/planets.png';    </script>  </body></html>
0 0