canvas线条动画曲线美效果-html代码-BFW代码库

canvas线条动画曲线美效果

代码语言：html

所属分类：动画

代码描述：canvas线条动画曲线美效果

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

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

<style>
*{
  width:100%;
  height:100%;
}
</style>

</head>
<body translate="no">
<canvas id="c"></canvas>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.min.js"></script>
<script>
// Customize these...
var n = 800, //points in the line
    speed = 30,
    amp = 400, // base amplitude
    rand = 0, //modifies amp
    cycles = 7,
    pan = window.innerWidth; //adjust panning to make a smoother lateral movement

// ...not these
var c = document.getElementById("c"),
    ctx = c.getContext("2d"),
    cw = (c.width = window.innerWidth),
    ch = (c.height = window.innerHeight),
    particles = [],
    Particle = function(index) {
      this.x = this.y = this.index = this.alpha = index;
      this.dur = 100/speed;
      this.draw = function(){ ctx.globalAlpha = this.alpha; ctx.lineTo(this.x, this.y); }
    };



function setParticle(p) {
  gsap.timeline({defaults:{duration:p.dur}, repeat:-1, yoyo:true })
      .fromTo(p, {
        x:(pan+cw)/n*(p.index+1),
        y:ch/2 + (gsap.u.........完整代码请登录后点击上方下载按钮下载查看