HTML5画布振荡斑点

来源：互联网发布：北京匡恩网络ceo 编辑：程序博客网时间：2024/06/08 05:00

在这个实验中,我们将动画振荡blob渐变点为每一个blob。
产品说明:刷新页面生成新的斑点。您还可以拖拽blob动画。

<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }      #container {        background-color: black;      }    </style>  </head>  <body>    <div id="container"></div>    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>    <script defer="defer">      var stageWidth = 578;      var stageHeight = 400;      var stage = new Kinetic.Stage({        container: 'container',        width: 578,        height: 400      });      var layer = new Kinetic.Layer();      var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];      var blobs = [];            // create 6 blobs      for(var n = 0; n < 6; n++) {        // build array of random points        var points = [];        for(var i = 0; i < 5; i++) {          points.push(stageWidth * Math.random());          points.push(stageHeight * Math.random());        }        var blob = new Kinetic.Line({          points: points,          fill: colors[n],          stroke: 'black',          strokeWidth: 2,          tension: 0,          closed: true,          opacity: Math.random(),          draggable: true        });        layer.add(blob);         blobs.push(blob);      }      stage.add(layer);      var period = 2000;      var centerTension = 0;      var amplitude = 1;      var anim = new Kinetic.Animation(function(frame) {        for(var n = 0; n < blobs.length; n++) {          blobs[n].setTension(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerTension);        }      }, layer);       anim.start();    </script>  </body></html>

0 0