canvas背景动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

ctx.strokeStyle = this.getColorString();
      this.renderStyle(this.style);
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      ctx.stroke(new Path2D(this.line.path));
      return this;
    }
  }
  function clear() {
    ctx.fillStyle = `hsla(200deg, 20%, 10%, 0.3)`;
    ctx.fillRect(0, 0, width, height);
  }
  function generateLines(amount) {
    let lines = [];
    let styles = [
      {
        size: 1.25,
        style: "pattern",
        color: { h: 210, s: 100, l: 70, a: 0.5 }
      },
      { size: 2.5, style: "pattern", color: { h: 190, s: 90, l: 50, a: 0.3 } },
      { size: 5, style: "pattern", color: { h: 210, s: 70, l: 60, a: 0.2 } },
      { size: 10, style: "pattern", color: { h: 310, s: 80, l: 55, a: 0.15 } },
      { size: 20, style: "pattern", color: { h: 200, s: 25, l: 35, a: 0.12 } },
      { size: 20, style: "pattern", color: { h: 210, s: 20, l: 40, a: 0.12 } },
      { size: 40, style: "pattern", color: { h: 190, s: 40, l: 50, a: 0.12 } },
      { size: 80, style: "pattern", color: { h: 220, s: 50, l: 60, a: 0.12 } },
      { size: 40, style: "glitches", color: { h: 300, s: 100, l: 50, a: 0.3 } },
      { size: 20, style: "glitches", color: { h: 210, s: 100, l: 50, a: 0.3 } },
      { size: 60, style: "glitches", color: { h: 30, s: 100, l: 50, a: 0.3 } }
    ];
    for (let i = 0; i < amount; i += 1) {
      let style = styles[(Math.random() ** 2 * styles.length) | 0];
      lines.push(
        new Line(
          { x: width * 0.5, y: height * 0.5 },
          style.size,
          500 + Math.random() * 1000,
          style.color,
          style.style
        )
      );
    }
    return lines;
  }
  let id;
  function resize() {
    id = cancelAnimationFrame(id);
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
    const lines = generateLines(40);
    function update() {
      if (!(id % 3)) {
        clear();
        lines.forEach((line) => {
          line.draw();
          if (!(id % 5) && Math.random() > 0.95) {
            line.mutatePath();
          }
        });
      }
      id = requestAnimationFrame(update);
    }
    id = requestAnimationFrame(update);
  }
  window.addEventListener("resize", resize, {
    passive: true
  });
  resize();
})();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg