canvas线条麻花圈圈动画效果代码-html代码-BFW代码库

canvas线条麻花圈圈动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas线条麻花圈圈动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  margin: 0;
  padding: 0;
  background: #172442;
}
body:before {
  content: "";
  position: absolute;
  z-index: 1;
  background: linear-gradient(0deg, #191842, transparent 95%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 400px;
  box-shadow: -5px 35px 30px -20px rgba(0, 0, 0, 0.5);
}
body:after {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 1.4em;
  margin: 0 0 0 0.6em;
  text-transform: uppercase;
  content: "BREATHE";
  color: violet;
  mix-blend-mode: lighten;
  font-size: 12px;
  font-family: serif;
  opacity: 0.8;
}

canvas {
  position: relative;
  z-index: 2;
  background: transparent;
}
</style>

  
  
</head>

<body>
  <canvas id="canvas"></canvas>

  
      <script >
const mapRange = (a, b, c, d, e) => {
  return (a - b) * (e - d) / (c - b) + d;
};
const lerp = (v0, v1, t) => {
  return v0 * (1 - t) + v1 * t;
};
const random = (min, max) => min + Math.random() * (max - min);
const sin = t => Math.sin(t);
const cos = t => Math.cos(t);
const PI = Math.PI;
const TAO = PI * 2;
const LOOP = 4;

class Raf {
  constructor() {
    this.raf();
  }

  raf() {
    if (this.onRaf) {
      window.requestAnimationFrame(() => {
        const o = {};
        o.time = window.performance.now() / 1000;
        o.playhead = o.time % LOOP / LOOP;
        this.raf();
        this.onRaf(o);
      });
    }
  }}


class Canvas extends Raf {
  constructor(obj) {
    super();
    this.canvas = document.getElementById(obj.id);
    this.ctx = this.canvas.getContext("2d");
    this.resize();
    this.events();
  }

  resize() {
    this.dpr = window.devicePixelRatio;
    this.canvas.style.width = `${window.innerWidth}px`;
    this.canvas.style.height = `${window.innerHeight}px`;
    this.canvas.width = window.in.........完整代码请登录后点击上方下载按钮下载查看