原生js实现线条液体流动交互动画效果-html代码-BFW代码库

原生js实现线条液体流动交互动画效果

代码语言：html

所属分类：粒子

代码描述：原生js实现线条液体流动交互动画效果

下面为部分代码预览，完整代码请点击下载或在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 translate="no" >
  <canvas id="canvas"></canvas>

  
  
      <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; .........完整代码请登录后点击上方下载按钮下载查看