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

最新推荐文章于 2015-12-13 20:36:49 发布

qinjiameis

最新推荐文章于 2015-12-13 20:36:49 发布

阅读量444

点赞数

分类专栏： KineticJS里面的Canvas tango形状文章标签： KineticJS里面的tango形状

本文链接：https://blog.csdn.net/qinjiameis/article/details/12874817

版权

KineticJS里面的Canvas tango形状专栏收录该内容

0 篇文章 0 订阅

订阅专栏

代码说明:拖拽形状和按“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 οnmοusedοwn="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>

qinjiameis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5知识：KineticJS里面的Canvas tango形状！

代码说明:拖拽形状和按“tango”按钮使形状移动。刷新页面生成新的随机形状。其它的话也不多说啦，大家可能等着看代码啦，其实，觉得有点难哦，我也在学习哦。呵呵。 body { margin: 0px; padding: 0px; } canvas { borde
复制链接

扫一扫