HTML5知识：KineticJS里面的Canvas tango形状！

来源：互联网发布：djvu阅读器知乎编辑：程序博客网时间：2024/05/16 18:36

代码说明:拖拽形状和按“tango”按钮使形状移动。刷新页面生成新的随机形状。

其它的话也不多说啦，大家可能等着看代码啦，其实，觉得有点难哦，我也在学习哦。呵呵。

<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }      canvas {        border: 1px solid #9C9898;      }      #tango {        position: absolute;        top: 10px;        left: 10px;        padding: 10px;      }      #container {        background-image: url("http://www.html5canvastutorials.com/demos/assets/blue-background.jpg");        display: inline-block;        overflow: hidden;        height: 365px;        width: 580px;      }    </style>  </head>  <body onmousedown="return false;">    <div id="container"></div>    <input type="button" id="tango" value="Tango!">    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>    <script defer="defer">      var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];                function getRandomColor() {          return colors[Math.round(Math.random() * 5)];      }            function tango(layer) {        var color = Kinetic.Util.getRGB(getRandomColor());                          for(var n = 0; n < layer.getChildren().length; n++) {          var shape = layer.getChildren()[n];          var stage = shape.getStage();          var radius = Math.random() * 100 + 20;                    new Kinetic.Tween({            node: shape,             duration: 1,            x: Math.random() * stage.getWidth(),             y: Math.random() * stage.getHeight(),             rotation: Math.random() * Math.PI * 2,             radius: radius,            opacity: (radius - 20) / 100,            easing: Kinetic.Easings.EaseInOut,            fillR: color.r,            fillG: color.g,            fillB: color.b          }).play();        }      }      var stage = new Kinetic.Stage({        container: 'container',        width: 578,        height: 363      });      var layer = new Kinetic.Layer();      for(var n = 0; n < 10; n++) {        var radius = Math.random() * 100 + 20;        var shape = new Kinetic.RegularPolygon({          x: Math.random() * stage.getWidth(),          y: Math.random() * stage.getHeight(),          sides: Math.ceil(Math.random() * 5 + 3),          radius: radius,          fill: getRandomColor(),          opacity: (radius - 20) / 100,          draggable: true        });        layer.add(shape);      }      stage.add(layer);      document.getElementById('tango').addEventListener('click', function() {        tango(layer);      }, false);    </script>  </body></html>