paper实现canvas波浪波纹动画背景效果代码-html代码-BFW代码库

paper实现canvas波浪波纹动画背景效果代码

代码语言：html

所属分类：动画

代码描述：paper实现canvas波浪波纹动画背景效果代码

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

<html>
<head>
    <style>
body {
    margin: 0;
    width: 100%;
    height: 100vh;
    background: #2b2a2b;
}

canvas[resize] {
    width: 100%;
    height: 100%;
}

/* for dat.GUI */
#gui_container{
  position: absolute;
  top: 0;
  right: -30px;
  z-index: 9;
  transform-origin: 0 0;
  transform: scale(0.8);
}

.folder:nth-of-type(1) .dg  .slider-fg {
  background: red ;
}
.folder:nth-of-type(2) .dg  .slider-fg {
  background: #093da8 ;
}
.folder:nth-of-type(4) .dg  .slider-fg {
  background: #0d5cb4 ;
}
.folder:nth-of-type(3) .dg  .slider-fg {
  background: #308cf1 ;
}
    </style>
</head>
<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/paper.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<canvas id="canvas" ></canvas>

<div id="gui_container"></div>

     
<!-- Define inlined PaperScript associate it with canvas -->
<script type="text/paperscript" canvas="canvas">
var path1 = new Path({
  fillColor: '#093da8',
  strokeColor: 'rgba(76,154,240,1)',
  strokeWidth: 2,
  shadowColor: new Color(0, 0, 0),
  shadowBlur: 12,
  shadowOffset: new Point(5, 5),
  closed: true,
  //selected: true,
});

var path2,
path3,
h2 = 0,
up = false;

var p1 = {
  segments: 18,
  speed: 2,
  shape: 1.9,
  height: 100,
}

var p2 = {
  speed: 0.8,
  shape: 1.5,
  height: 40,
}

var p3 = {
  speed: 1.5,
  shape: 1.8,
  height: 0,
}



function onResize(event) {
  createSegments()
}

function createSegments() {
  wave_height = canvas.height / 2 + 30;

  path1.removeSegments();
  if (path2 !== undefined) path2.remove();
  if (path3 !== undefined) path3.remove();

  for (var i = 0; i <= p1.segments + 1; i++) {
    path1.add(new Point(view.size.width / p1.segments * i, wave_height));
  }

  path1.add([view.size.width + 5, view.size.height + 5], [-5, view.size.height + 5]);

  path2 = path1.clone();
  path2.fillColor =.........完整代码请登录后点击上方下载按钮下载查看