canvas实现玻璃纸折叠多边形动画效果代码-html代码-BFW代码库

canvas实现玻璃纸折叠多边形动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现玻璃纸折叠多边形动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>

html{
height:100%;
background: #092756;
 background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
}
body{
  margin:0;
  width:100%;
  overflow:hidden;
}
</style>

</head>
<body>

<canvas id='canv'></canvas>

  <script >
      window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(loop) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

var c = document.getElementById("canv"),
    $ = c.getContext("2d");

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight;

window.addEventListener('resize', function() {
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
});

var _p;
var _prev;
var _arr = [];

var cols = [
  'hsla(0, 5%, 95%, .15)',
  'hsla(0, 95%, 25%, .1)',
  'hsla(291, 95%, 35%, .1)',
  'hsla(235, 95%, 15%, .1)',
  'hsla(325, 95%, 45%, .1)'
];

var rndCol = function() {
  var len = cols.length;

  var hues = Math.floor(Math.random() * len);
  return cols[hues];
}

var rng = function(_fm, _to) {
  return _fm + (Math.random() * (_to - _fm));
}

var _obj = function(_idx, _x, _y) {
  this.idx = _idx + Math.random();
  this.t = (Math.PI / 2);
  this.x = _x;
  this.y = _y;
  this.s = 1;
  this.col = "hsla(255,255%,255%,1)";
  this.ax = rng(-1, 1);
  this.ay = rng(-1, 1);
  this.dist = 0;
  this.conn = 0;
  this._conn = [];

  this.r = 10;
  this.sp = .002;
  this.col = rndCol();
  this.draw = function() {

    $.moveTo(this.x, this.y);
    $.fil.........完整代码请登录后点击上方下载按钮下载查看