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.........完整代码请登录后点击上方下载按钮下载查看