canvas实现线条黑白鼠标交互动画效果代码-html代码-BFW代码库

canvas实现线条黑白鼠标交互动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现线条黑白鼠标交互动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">

</head>

<body>
    <!-- partial:index.partial.html -->
    <canvas class="js-draw"></canvas>
    <!-- partial -->
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tinycolor.min.js"></script>
    <script type="module">
        import anime from '//repo.bfw.wiki/bfwrepo/js/module/anime.es.js';

// https://ptsjs.org/
const TAU = Math.PI * 2;

const canvas = document.querySelector('.js-draw');

class Stage {
  constructor(canvas, width, height) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');

    this.width = width;
    this.height = height;

    this.options = {
      rotation: Math.atan2(width, height) + Math.PI / 2,
      backgroundColor: '#011627',
      lineColor: '#FDFFFC',
      pointColor1: '#41EAD4',
      pointColor2: '#F71735',
    };

    this.points = [];

    this.line = { from: { x: 0, y: height * 0.5 }, to: { x: width, y: height * 0.5 } };

    this.animation = null;
  }

  get rotation() {
    return this.options.rotation;
  }

  get width() {
    return this.canvas.width;
  }

  get height() {
    return this.canvas.height;
  }

  get hypo() {
    return Math.hypot(this.width, this.height);
  }

  get widthHalf() {
    return this.width * 0.5;
  }

  get heightHalf() {
    return this.height * 0.5;
  }

  set width(w) {
    this.canvas.width = w;
  }

  set height(h) {
    this.canvas.height = h;
  }

  init() {
    this.generate();

    this.canvas.addEventListener('mousemove', e => this.onMouseMove(e));
    this.canvas.addEventListener('mouseenter', e => this.onMoueEnter(e));
    this.canvas.addEventListener('mouseleave', e => this.onMouseLeave(e));
  }

  generate() {
    this.points = new Array(100).fill().map((_, i) => {
      const r = (this.heightHalf * 0.5) + Math.random() * (this.heightHalf / 2);
      const c = i % 2 === 0 ? this.options.pointColor1 : this.options.pointColor2;

      const point = {
        r,
        a: Math.random() * TAU,
        s: 0.0005 + (Math.random() * 0.0008),
        c,
      };

      return point;
    });
  }

  setSize(w, h) {
    this.width = w;
    this.height = h;
  }

  onMouseMove(e) {
    const x = e.clientX - e.target.offsetLeft;
    const y = e.clientY - e.target.offsetTop;

    this.options.rotation = Math.atan2(this.heightHalf - y, this.widthHalf - x);
  }

  onMoueEnter() {
    if (this.animation) {
      this.animation.pause();
    }

    this.animation = null;
  }

  onMouseLeave() {
    this.animate();
  }

  animate() {
    const diff = -Math.PI + (Math.random() * TAU);
    const angle = this.rotation + diff;

    this.animation = anime({
      targets: this.options,
      duration: 3000,
      delay: 3000,
      rotation: angle,
      easing: 'easeInOutSine',
      complete: () => {
        this.animate();
      },
    }).........完整代码请登录后点击上方下载按钮下载查看