canvas粒子光束蛇形跟随鼠标交互动画效果代码-html代码-BFW代码库

canvas粒子光束蛇形跟随鼠标交互动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas粒子光束蛇形跟随鼠标交互动画效果代码

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

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

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

    <script>
        window.requestAnimFrame = (function() {
          return (
            window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
              window.setTimeout(callback);
            }
          );
        });
        
        function init(elemid) {
          let canvas = document.getElementById(elemid),
            c = canvas.getContext("2d"),
            w = (canvas.width = window.innerWidth),
            h = (canvas.height = window.innerHeight);
          c.fillStyle = "rgba(30,30,30,1)";
          c.fillRect(0, 0, w, h);
          return {c:c,canvas:canvas};
        }
    </script>
    <style>
        body,
    html {
      margin: 0px;
      padding: 0px;
      position: fixed;
      background: rgb(30, 30, 30);
      cursor: none;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <canvas id="canvas"></canvas>
    <!-- partial -->
    <script>
        window.onload = function () {
      //functions definition
    
      //class definition
      class segm {
        constructor(x, y, l) {
          this.b = Math.random()*1.9+0.1;
          this.x0 = x;
          this.y0 = y;
          this.a = Math.random() * 2 * Math.PI;
          this.x1 = this.x0 + l * Math.cos(this.a);
          this.y1 = this.y0 + l * Math.sin(this.a);
          this.l = l;
        }
        update(x, y) {
          this.x0 = x;
          this.y0 = y;
          this.a = Math.atan2(this.y1 - this.y0, this.x1 - this.x0);
          this.x1 = this.x0 + this.l * Math.cos(this.a);
          this.y1 = this.y0 + this.l * Math.sin(this.a);
        }
      }
      class rope {
        constructor(tx, ty, l, b, slq, typ) {
          if(typ == "l"){
            this.res = l / 2;
          }else{
            this.res = l / slq;
          }
          this.type = typ;
          this.l = l;
          this.segm = [];
          this.segm.push(new segm(tx, ty, this.l / this.res));
          for (let i = 1; i < this.res; i++) {
            this.segm.push(
              new segm(this.segm[i - 1].x1, this.segm[i - 1].y1, this.l / this.res)
            );
          }
          this.b = b;
        }
        update(t) {
          this.segm[0].update(t.x, t.y);
          for (let i = 1; i < this.res; i++) {
            this.segm[i].update(this.segm[i - 1].x1, this.segm[i - 1].y1);
          }
        }
        show() {
          if(this.type == "l"){
          c.beginPath();
          for (let i = 0; i < this.segm.length; i++) {
            c.lineTo(this.segm[i].x0, this.segm[i].y0);
          }
          c.lineTo(
            this.segm[this.segm.length - 1].x1,
            this.segm[this.segm.length - 1].y1
          );
          c.strokeStyle = "white";
          c.lineWidth = this.b;
          c.stroke();
    
          c.beginPath();
          c.arc(this.segm[0].x0, this.segm[0].y0, 1, 0, 2 * Math.PI);
          c.fillStyle = "white";
          c.fill();
    
          c.beginPath();
          c.arc(
            this.segm[this.segm.length - 1].x1,
            this.segm[this.segm.length - 1].y1,
            2,
            0,
            2 * Math.PI
          );
          c.fillStyle = "white";
          c.fill();
          }else{
          for (let i = 0; i < this.segm.length; i++) {
            c.beginPath();
            c.arc(t.........完整代码请登录后点击上方下载按钮下载查看