javascript - JS：在我的页面中放置 2 个液体按钮而不是 1 个

问题描述

大家好！我希望你感觉良好，祝你新年快乐！

我只是喜欢这个液体按钮： https ://codepen.io/waaark/pen/VbgwEM

$(function() {
    // Vars
    var pointsA = [],
        pointsB = [],
        $canvas = null,
        canvas = null,
        context = null,
        vars = null,
        points = 8,
        viscosity = 20,
        mouseDist = 70,
        damping = 0.05,
        showIndicators = false;
        mouseX = 0,
        mouseY = 0,
        relMouseX = 0,
        relMouseY = 0,
        mouseLastX = 0,
        mouseLastY = 0,
        mouseDirectionX = 0,
        mouseDirectionY = 0,
        mouseSpeedX = 0,
        mouseSpeedY = 0;

    /**
     * Get mouse direction
     */
    function mouseDirection(e) {
        if (mouseX < e.pageX)
            mouseDirectionX = 1;
        else if (mouseX > e.pageX)
            mouseDirectionX = -1;
        else
            mouseDirectionX = 0;

        if (mouseY < e.pageY)
            mouseDirectionY = 1;
        else if (mouseY > e.pageY)
            mouseDirectionY = -1;
        else
            mouseDirectionY = 0;

        mouseX = e.pageX;
        mouseY = e.pageY;

        relMouseX = (mouseX - $canvas.offset().left);
        relMouseY = (mouseY - $canvas.offset().top);
    }
    $(document).on('mousemove', mouseDirection);

    /**
     * Get mouse speed
     */
    function mouseSpeed() {
        mouseSpeedX = mouseX - mouseLastX;
        mouseSpeedY = mouseY - mouseLastY;

        mouseLastX = mouseX;
        mouseLastY = mouseY;

        setTimeout(mouseSpeed, 50);
    }
    mouseSpeed();

    /**
     * Init button
     */
    function initButton() {
        // Get button
        var button = $('.btn-liquid');
        var buttonWidth = button.width();
        var buttonHeight = button.height();

        // Create canvas
        $canvas = $('<canvas></canvas>');
        button.append($canvas);

        canvas = $canvas.get(0);
        canvas.width = buttonWidth+100;
        canvas.height = buttonHeight+100;
        context = canvas.getContext('2d');

        // Add points

        var x = buttonHeight/2;
        for(var j = 1; j < points; j++) {
            addPoints((x+((buttonWidth-buttonHeight)/points)*j), 0);
        }
        addPoints(buttonWidth-buttonHeight/5, 0);
        addPoints(buttonWidth+buttonHeight/10, buttonHeight/2);
        addPoints(buttonWidth-buttonHeight/5, buttonHeight);
        for(var j = points-1; j > 0; j--) {
            addPoints((x+((buttonWidth-buttonHeight)/points)*j), buttonHeight);
        }
        addPoints(buttonHeight/5, buttonHeight);

        addPoints(-buttonHeight/10, buttonHeight/2);
        addPoints(buttonHeight/5, 0);
        // addPoints(x, 0);
        // addPoints(0, buttonHeight/2);

        // addPoints(0, buttonHeight/2);
        // addPoints(buttonHeight/4, 0);

        // Start render
        renderCanvas();
    }

    /**
     * Add points
     */
    function addPoints(x, y) {
        pointsA.push(new Point(x, y, 1));
        pointsB.push(new Point(x, y, 2));
    }

    /**
     * Point
     */
    function Point(x, y, level) {
      this.x = this.ix = 50+x;
      this.y = this.iy = 50+y;
      this.vx = 0;
      this.vy = 0;
      this.cx1 = 0;
      this.cy1 = 0;
      this.cx2 = 0;
      this.cy2 = 0;
      this.level = level;
    }

    Point.prototype.move = function() {
        this.vx += (this.ix - this.x) / (viscosity*this.level);
        this.vy += (this.iy - this.y) / (viscosity*this.level);

        var dx = this.ix - relMouseX,
            dy = this.iy - relMouseY;
        var relDist = (1-Math.sqrt((dx * dx) + (dy * dy))/mouseDist);

        // Move x
        if ((mouseDirectionX > 0 && relMouseX > this.x) || (mouseDirectionX < 0 && relMouseX < this.x)) {
            if (relDist > 0 && relDist < 1) {
                this.vx = (mouseSpeedX / 4) * relDist;
            }
        }
        this.vx *= (1 - damping);
        this.x += this.vx;

        // Move y
        if ((mouseDirectionY > 0 && relMouseY > this.y) || (mouseDirectionY < 0 && relMouseY < this.y)) {
            if (relDist > 0 && relDist < 1) {
                this.vy = (mouseSpeedY / 4) * relDist;
            }
        }
        this.vy *= (1 - damping);
        this.y += this.vy;
    };


    /**
     * Render canvas
     */
    function renderCanvas() {
        // rAF
        rafID = requestAnimationFrame(renderCanvas);

        // Clear scene
        context.clearRect(0, 0, $canvas.width(), $canvas.height());
        context.fillStyle = '#fff';
        context.fillRect(0, 0, $canvas.width(), $canvas.height());

        // Move points
        for (var i = 0; i <= pointsA.length - 1; i++) {
            pointsA[i].move();
            pointsB[i].move();
        }

        // Create dynamic gradient
        var gradientX = Math.min(Math.max(mouseX - $canvas.offset().left, 0), $canvas.width());
        var gradientY = Math.min(Math.max(mouseY - $canvas.offset().top, 0), $canvas.height());
        var distance = Math.sqrt(Math.pow(gradientX - $canvas.width()/2, 2) + Math.pow(gradientY - $canvas.height()/2, 2)) / Math.sqrt(Math.pow($canvas.width()/2, 2) + Math.pow($canvas.height()/2, 2));

        var gradient = context.createRadialGradient(gradientX, gradientY, 300+(300*distance), gradientX, gradientY, 0);
        gradient.addColorStop(0, '#102ce5');
        gradient.addColorStop(1, '#E406D6');

        // Draw shapes
        var groups = [pointsA, pointsB]

        for (var j = 0; j <= 1; j++) {
            var points = groups[j];

            if (j == 0) {
                // Background style
                context.fillStyle = '#1CE2D8';
            } else {
                // Foreground style
                context.fillStyle = gradient;
            }

            context.beginPath();
            context.moveTo(points[0].x, points[0].y);

            for (var i = 0; i < points.length; i++) {
                var p = points[i];
                var nextP = points[i + 1];
                var val = 30*0.552284749831;

                if (nextP != undefined) {
                    // if (nextP.ix > p.ix && nextP.iy < p.iy) {
                    //  p.cx1 = p.x;
                    //  p.cy1 = p.y-val;
                    //  p.cx2 = nextP.x-val;
                    //  p.cy2 = nextP.y;
                    // } else if (nextP.ix > p.ix && nextP.iy > p.iy) {
                    //  p.cx1 = p.x+val;
                    //  p.cy1 = p.y;
                    //  p.cx2 = nextP.x;
                    //  p.cy2 = nextP.y-val;
                    // }  else if (nextP.ix < p.ix && nextP.iy > p.iy) {
                    //  p.cx1 = p.x;
                    //  p.cy1 = p.y+val;
                    //  p.cx2 = nextP.x+val;
                    //  p.cy2 = nextP.y;
                    // } else if (nextP.ix < p.ix && nextP.iy < p.iy) {
                    //  p.cx1 = p.x-val;
                    //  p.cy1 = p.y;
                    //  p.cx2 = nextP.x;
                    //  p.cy2 = nextP.y+val;
                    // } else {

                        p.cx1 = (p.x+nextP.x)/2;
                        p.cy1 = (p.y+nextP.y)/2;
                        p.cx2 = (p.x+nextP.x)/2;
                        p.cy2 = (p.y+nextP.y)/2;

                        context.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
                    //  continue;
                    // }

                    // context.bezierCurveTo(p.cx1, p.cy1, p.cx2, p.cy2, nextP.x, nextP.y);
                } else {
nextP = points[0];
                        p.cx1 = (p.x+nextP.x)/2;
                        p.cy1 = (p.y+nextP.y)/2;

                        context.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
                }
            }

            // context.closePath();
            context.fill();
        }

        if (showIndicators) {
            // Draw points
            context.fillStyle = '#000';
            context.beginPath();
            for (var i = 0; i < pointsA.length; i++) {
                var p = pointsA[i];

                context.rect(p.x - 1, p.y - 1, 2, 2);
            }
            context.fill();

            // Draw controls
            context.fillStyle = '#f00';
            context.beginPath();
            for (var i = 0; i < pointsA.length; i++) {
                var p = pointsA[i];

                context.rect(p.cx1 - 1, p.cy1 - 1, 2, 2);
                context.rect(p.cx2 - 1, p.cy2 - 1, 2, 2);
            }
            context.fill();
        }
    }

    // Init
    initButton();
});

body {
    display: flex;
    height: 100vh;

    align-items: center;
    justify-content: center;
}

.btn-liquid {
    display: inline-block;
    position: relative;
    width: 240px;
    height: 60px;

    border-radius: 27px;

    color: #fff;
    font: 700 14px/60px "Droid Sans", sans-serif;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-liquid .inner {
    position: relative;

    z-index: 2;
}

.btn-liquid canvas {
    position: absolute;
    top: -50px;
    right: -50px;
    bottom: -50px;
    left: -50px;

    z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="http://waaark.com" class="btn-liquid">
        <span class="inner">Liquid button ?</span>
</a>

我想把这个可爱的按钮中的 2 个放在同一个网页上，但我只成功地将 1 个放在同一个页面上。我想是因为JS的原因，变量的名字一定不同。所以我试图重命名第二个按钮的所有变量，但我没有成功。我是 JS 的新手，我认为我无法区分什么是真正的变量而不是这个脚本中没有的变量（这似乎有非常多的变量）。

你能帮我把两个这个可爱的按钮放在同一个网页上吗？

PS：为了更进一步：为了成功，我尝试了这支笔：https ://codepen.io/architechnium/pen/wpYgGY （我们称之为“第二支笔”）但效果更差，因为这支笔我我的本地网页上只有一个没有按钮的白页（虽然我用第一支笔做的完全一样）。

但我认为这第二支笔可能有一个技巧或一些特别的东西，因为这支笔只有 1 414 次查看，而不是第一支笔（只有一个按钮）的 60 000+ 次。

非常感谢您的关注，非常感谢您的帮助！:)

标签： javascriptbuttonliquidinteractive

解决方案

您需要为第二个按钮添加两次代码。您可以优化代码。我正在展示这种方式，您可以添加两个按钮。

$(function() {
  // Vars
  var pointsA = [],
    pointsB = [],
    $canvas = null,
    canvas = null,
    context = null,
    vars = null,
    points = 8,
    viscosity = 20,
    mouseDist = 70,
    damping = 0.05,
    showIndicators = false;
    mouseX = 0,
    mouseY = 0,
    relMouseX = 0,
    relMouseY = 0,
    mouseLastX = 0,
    mouseLastY = 0,
    mouseDirectionX = 0,
    mouseDirectionY = 0,
    mouseSpeedX = 0,
    mouseSpeedY = 0;
    pointsA2 = [],
    pointsB2 = [],
    $canvas2 = null,
    canvas2 = null,
    context2 = null,
    vars2 = null,
    points2 = 8,
    viscosity2 = 20,
    mouseDist2 = 70,
    damping2 = 0.05,
    showIndicators2 = false;
    mouseX2 = 0,
    mouseY2 = 0,
    relMouseX2 = 0,
    relMouseY2 = 0,
    mouseLastX2 = 0,
    mouseLastY2 = 0,
    mouseDirectionX2 = 0,
    mouseDirectionY2 = 0,
    mouseSpeedX2 = 0,
    mouseSpeedY2 = 0;

  /**
   * Get mouse direction
   */
  function mouseDirection(e) {
    if (mouseX < e.pageX)
      mouseDirectionX = 1;
    else if (mouseX > e.pageX)
      mouseDirectionX = -1;
    else
      mouseDirectionX = 0;

    if (mouseY < e.pageY)
      mouseDirectionY = 1;
    else if (mouseY > e.pageY)
      mouseDirectionY = -1;
    else
      mouseDirectionY = 0;

    mouseX = e.pageX;
    mouseY = e.pageY;

    relMouseX = (mouseX - $canvas.offset().left);
    relMouseY = (mouseY - $canvas.offset().top);
  }
  function mouseDirection2(e) {
    if (mouseX2 < e.pageX)
      mouseDirectionX2 = 1;
    else if (mouseX2 > e.pageX)
      mouseDirectionX2 = -1;
    else
      mouseDirectionX2 = 0;

    if (mouseY2 < e.pageY)
      mouseDirectionY2 = 1;
    else if (mouseY2 > e.pageY)
      mouseDirectionY2 = -1;
    else
      mouseDirectionY2 = 0;

    mouseX2 = e.pageX;
    mouseY2 = e.pageY;

    relMouseX2 = (mouseX2 - $canvas2.offset().left);
    relMouseY2 = (mouseY2 - $canvas2.offset().top);
  }
  $('.btn-grid-1').on('mousemove', mouseDirection);
  $('.btn-grid-2').on('mousemove', mouseDirection2);
  /**
   * Get mouse speed
   */
  function mouseSpeed() {
    mouseSpeedX = mouseX - mouseLastX;
    mouseSpeedY = mouseY - mouseLastY;

    mouseLastX = mouseX;
    mouseLastY = mouseY;

    setTimeout(mouseSpeed, 50);
  }
  mouseSpeed();

  function mouseSpeed2() {
    mouseSpeedX2 = mouseX2 - mouseLastX2;
    mouseSpeedY2 = mouseY2 - mouseLastY2;

    mouseLastX2 = mouseX2;
    mouseLastY2 = mouseY2;

    setTimeout(mouseSpeed2, 50);
  }
  mouseSpeed2();

  /**
   * Init button
   */
  function initButton() {
    // Get button
    var button = $('.btn-liquid');
    var buttonWidth = button.width();
    var buttonHeight = button.height();

    // Create canvas
    $canvas = $('<canvas></canvas>');
    button.append($canvas);

    canvas = $canvas.get(0);
    canvas.width = buttonWidth+100;
    canvas.height = buttonHeight+100;
    context = canvas.getContext('2d');

    // Add points

    var x = buttonHeight/2;
    for(var j = 1; j < points; j++) {
      addPoints((x+((buttonWidth-buttonHeight)/points)*j), 0);
    }
    addPoints(buttonWidth-buttonHeight/5, 0);
    addPoints(buttonWidth+buttonHeight/10, buttonHeight/2);
    addPoints(buttonWidth-buttonHeight/5, buttonHeight);
    for(var j = points-1; j > 0; j--) {
      addPoints((x+((buttonWidth-buttonHeight)/points)*j), buttonHeight);
    }
    addPoints(buttonHeight/5, buttonHeight);

    addPoints(-buttonHeight/10, buttonHeight/2);
    addPoints(buttonHeight/5, 0);
    // addPoints(x, 0);
    // addPoints(0, buttonHeight/2);

    // addPoints(0, buttonHeight/2);
    // addPoints(buttonHeight/4, 0);

    // Start render
    renderCanvas();
  }
  function initButton2() {
    // Get button
    var button = $('.btn-liquid-2');
    var buttonWidth = button.width();
    var buttonHeight = button.height();

    // Create canvas
    $canvas2 = $('<canvas></canvas>');
    button.append($canvas2);

    canvas2 = $canvas2.get(0);
    canvas2.width = buttonWidth+100;
    canvas2.height = buttonHeight+100;
    context2 = canvas2.getContext('2d');

    // Add points

    var x = buttonHeight/2;
    for(var j = 1; j < points2; j++) {
      addPoints2((x+((buttonWidth-buttonHeight)/points2)*j), 0);
    }
    addPoints2(buttonWidth-buttonHeight/5, 0);
    addPoints2(buttonWidth+buttonHeight/10, buttonHeight/2);
    addPoints2(buttonWidth-buttonHeight/5, buttonHeight);
    for(var j = points2-1; j > 0; j--) {
      addPoints2((x+((buttonWidth-buttonHeight)/points2)*j), buttonHeight);
    }
    addPoints2(buttonHeight/5, buttonHeight);

    addPoints2(-buttonHeight/10, buttonHeight/2);
    addPoints2(buttonHeight/5, 0);
    // addPoints(x, 0);
    // addPoints(0, buttonHeight/2);

    // addPoints(0, buttonHeight/2);
    // addPoints(buttonHeight/4, 0);

    // Start render
    renderCanvas2();
  }

  /**
   * Add points
   */
  function addPoints(x, y) {
    pointsA.push(new Point(x, y, 1));
    pointsB.push(new Point(x, y, 2));
  }
  function addPoints2(x, y) {
    pointsA2.push(new Point2(x, y, 1));
    pointsB2.push(new Point2(x, y, 2));
  }

  /**
   * Point
   */
  function Point(x, y, level) {
    this.x = this.ix = 50+x;
    this.y = this.iy = 50+y;
    this.vx = 0;
    this.vy = 0;
    this.cx1 = 0;
    this.cy1 = 0;
    this.cx2 = 0;
    this.cy2 = 0;
    this.level = level;
  }
  function Point2(x, y, level) {
    this.x = this.ix = 50+x;
    this.y = this.iy = 50+y;
    this.vx = 0;
    this.vy = 0;
    this.cx1 = 0;
    this.cy1 = 0;
    this.cx2 = 0;
    this.cy2 = 0;
    this.level = level;
  }

  Point.prototype.move = function() {
    this.vx += (this.ix - this.x) / (viscosity*this.level);
    this.vy += (this.iy - this.y) / (viscosity*this.level);

    var dx = this.ix - relMouseX,
      dy = this.iy - relMouseY;
    var relDist = (1-Math.sqrt((dx * dx) + (dy * dy))/mouseDist);

    // Move x
    if ((mouseDirectionX > 0 && relMouseX > this.x) || (mouseDirectionX < 0 && relMouseX < this.x)) {
      if (relDist > 0 && relDist < 1) {
        this.vx = (mouseSpeedX / 4) * relDist;
      }
    }
    this.vx *= (1 - damping);
    this.x += this.vx;

    // Move y
    if ((mouseDirectionY > 0 && relMouseY > this.y) || (mouseDirectionY < 0 && relMouseY < this.y)) {
      if (relDist > 0 && relDist < 1) {
        this.vy = (mouseSpeedY / 4) * relDist;
      }
    }
    this.vy *= (1 - damping);
    this.y += this.vy;
  };
  Point2.prototype.move = function() {
    this.vx += (this.ix - this.x) / (viscosity2*this.level);
    this.vy += (this.iy - this.y) / (viscosity2*this.level);

    var dx = this.ix - relMouseX2,
      dy = this.iy - relMouseY2;
    var relDist2 = (1-Math.sqrt((dx * dx) + (dy * dy))/mouseDist);

    // Move x
    if ((mouseDirectionX2 > 0 && relMouseX2 > this.x) || (mouseDirectionX2 < 0 && relMouseX2 < this.x)) {
      if (relDist2 > 0 && relDist2 < 1) {
        this.vx = (mouseSpeedX2 / 4) * relDist2;
      }
    }
    this.vx *= (1 - damping2);
    this.x += this.vx;

    // Move y
    if ((mouseDirectionY2 > 0 && relMouseY2 > this.y) || (mouseDirectionY2 < 0 && relMouseY2 < this.y)) {
      if (relDist2 > 0 && relDist2 < 1) {
        this.vy = (mouseSpeedY2 / 4) * relDist2;
      }
    }
    this.vy *= (1 - damping2);
    this.y += this.vy;
  };


  /**
   * Render canvas
   */
  function renderCanvas() {
    // rAF
    rafID = requestAnimationFrame(renderCanvas);

    // Clear scene
    context.clearRect(0, 0, $canvas.width(), $canvas.height());
    context.fillStyle = '#fff';
    context.fillRect(0, 0, $canvas.width(), $canvas.height());

    // Move points
    for (var i = 0; i <= pointsA.length - 1; i++) {
      pointsA[i].move();
      pointsB[i].move();
    }

    // Create dynamic gradient
    var gradientX = Math.min(Math.max(mouseX - $canvas.offset().left, 0), $canvas.width());
    var gradientY = Math.min(Math.max(mouseY - $canvas.offset().top, 0), $canvas.height());
    var distance = Math.sqrt(Math.pow(gradientX - $canvas.width()/2, 2) + Math.pow(gradientY - $canvas.height()/2, 2)) / Math.sqrt(Math.pow($canvas.width()/2, 2) + Math.pow($canvas.height()/2, 2));

    var gradient = context.createRadialGradient(gradientX, gradientY, 300+(300*distance), gradientX, gradientY, 0);
    gradient.addColorStop(0, '#102ce5');
    gradient.addColorStop(1, '#E406D6');

    // Draw shapes
    var groups = [pointsA, pointsB]

    for (var j = 0; j <= 1; j++) {
      var points = groups[j];

      if (j == 0) {
        // Background style
        context.fillStyle = '#1CE2D8';
      } else {
        // Foreground style
        context.fillStyle = gradient;
      }

      context.beginPath();
      context.moveTo(points[0].x, points[0].y);

      for (var i = 0; i < points.length; i++) {
        var p = points[i];
        var nextP = points[i + 1];
        var val = 30*0.552284749831;

        if (nextP != undefined) {
          // if (nextP.ix > p.ix && nextP.iy < p.iy) {
          //  p.cx1 = p.x;
          //  p.cy1 = p.y-val;
          //  p.cx2 = nextP.x-val;
          //  p.cy2 = nextP.y;
          // } else if (nextP.ix > p.ix && nextP.iy > p.iy) {
          //  p.cx1 = p.x+val;
          //  p.cy1 = p.y;
          //  p.cx2 = nextP.x;
          //  p.cy2 = nextP.y-val;
          // }  else if (nextP.ix < p.ix && nextP.iy > p.iy) {
          //  p.cx1 = p.x;
          //  p.cy1 = p.y+val;
          //  p.cx2 = nextP.x+val;
          //  p.cy2 = nextP.y;
          // } else if (nextP.ix < p.ix && nextP.iy < p.iy) {
          //  p.cx1 = p.x-val;
          //  p.cy1 = p.y;
          //  p.cx2 = nextP.x;
          //  p.cy2 = nextP.y+val;
          // } else {

            p.cx1 = (p.x+nextP.x)/2;
            p.cy1 = (p.y+nextP.y)/2;
            p.cx2 = (p.x+nextP.x)/2;
            p.cy2 = (p.y+nextP.y)/2;

            context.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
          //  continue;
          // }

          // context.bezierCurveTo(p.cx1, p.cy1, p.cx2, p.cy2, nextP.x, nextP.y);
        } else {
nextP = points[0];
            p.cx1 = (p.x+nextP.x)/2;
            p.cy1 = (p.y+nextP.y)/2;

            context.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
        }
      }

      // context.closePath();
      context.fill();
    }

    if (showIndicators) {
      // Draw points
      context.fillStyle = '#000';
      context.beginPath();
      for (var i = 0; i < pointsA.length; i++) {
        var p = pointsA[i];

        context.rect(p.x - 1, p.y - 1, 2, 2);
      }
      context.fill();

      // Draw controls
      context.fillStyle = '#f00';
      context.beginPath();
      for (var i = 0; i < pointsA.length; i++) {
        var p = pointsA[i];

        context.rect(p.cx1 - 1, p.cy1 - 1, 2, 2);
        context.rect(p.cx2 - 1, p.cy2 - 1, 2, 2);
      }
      context.fill();
    }
  }
  function renderCanvas2() {
    // rAF
    rafID = requestAnimationFrame(renderCanvas2);

    // Clear scene
    context2.clearRect(0, 0, $canvas2.width(), $canvas2.height());
    context2.fillStyle = '#fff';
    context2.fillRect(0, 0, $canvas2.width(), $canvas2.height());

    // Move points
    for (var i = 0; i <= pointsA2.length - 1; i++) {
      pointsA2[i].move();
      pointsB2[i].move();
    }

    // Create dynamic gradient
    var gradientX = Math.min(Math.max(mouseX2 - $canvas2.offset().left, 0), $canvas2.width());
    var gradientY = Math.min(Math.max(mouseY2 - $canvas2.offset().top, 0), $canvas2.height());
    var distance = Math.sqrt(Math.pow(gradientX - $canvas2.width()/2, 2) + Math.pow(gradientY - $canvas2.height()/2, 2)) / Math.sqrt(Math.pow($canvas2.width()/2, 2) + Math.pow($canvas2.height()/2, 2));

    var gradient = context2.createRadialGradient(gradientX, gradientY, 300+(300*distance), gradientX, gradientY, 0);
    gradient.addColorStop(0, '#102ce5');
    gradient.addColorStop(1, '#E406D6');

    // Draw shapes
    var groups = [pointsA2, pointsB2]

    for (var j = 0; j <= 1; j++) {
      var points = groups[j];

      if (j == 0) {
        // Background style
        context2.fillStyle = '#1CE2D8';
      } else {
        // Foreground style
        context2.fillStyle = gradient;
      }

      context2.beginPath();
      context2.moveTo(points[0].x, points[0].y);

      for (var i = 0; i < points.length; i++) {
        var p = points[i];
        var nextP = points[i + 1];
        var val = 30*0.552284749831;

        if (nextP != undefined) {
          // if (nextP.ix > p.ix && nextP.iy < p.iy) {
          //  p.cx1 = p.x;
          //  p.cy1 = p.y-val;
          //  p.cx2 = nextP.x-val;
          //  p.cy2 = nextP.y;
          // } else if (nextP.ix > p.ix && nextP.iy > p.iy) {
          //  p.cx1 = p.x+val;
          //  p.cy1 = p.y;
          //  p.cx2 = nextP.x;
          //  p.cy2 = nextP.y-val;
          // }  else if (nextP.ix < p.ix && nextP.iy > p.iy) {
          //  p.cx1 = p.x;
          //  p.cy1 = p.y+val;
          //  p.cx2 = nextP.x+val;
          //  p.cy2 = nextP.y;
          // } else if (nextP.ix < p.ix && nextP.iy < p.iy) {
          //  p.cx1 = p.x-val;
          //  p.cy1 = p.y;
          //  p.cx2 = nextP.x;
          //  p.cy2 = nextP.y+val;
          // } else {

            p.cx1 = (p.x+nextP.x)/2;
            p.cy1 = (p.y+nextP.y)/2;
            p.cx2 = (p.x+nextP.x)/2;
            p.cy2 = (p.y+nextP.y)/2;

            context2.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
          //  continue;
          // }

          // context.bezierCurveTo(p.cx1, p.cy1, p.cx2, p.cy2, nextP.x, nextP.y);
        } else {
nextP = points[0];
            p.cx1 = (p.x+nextP.x)/2;
            p.cy1 = (p.y+nextP.y)/2;

            context2.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
        }
      }

      // context.closePath();
      context2.fill();
    }

    if (showIndicators2) {
      // Draw points
      context2.fillStyle = '#000';
      context2.beginPath();
      for (var i = 0; i < pointsA2.length; i++) {
        var p = pointsA2[i];

        context2.rect(p.x - 1, p.y - 1, 2, 2);
      }
      context2.fill();

      // Draw controls
      context2.fillStyle = '#f00';
      context2.beginPath();
      for (var i = 0; i < pointsA2.length; i++) {
        var p = pointsA2[i];

        context2.rect(p.cx1 - 1, p.cy1 - 1, 2, 2);
        context2.rect(p.cx2 - 1, p.cy2 - 1, 2, 2);
      }
      context2.fill();
    }
  }

  // Init
  initButton();
  initButton2();
});

body {
  display: flex;
  height: 100vh;

  align-items: center;
  justify-content: center;
}

.btn-liquid, .btn-liquid-2 {
  display: inline-block;
  position: relative;
  width: 240px;
  height: 60px;

  border-radius: 27px;

  color: #fff;
  font: 700 14px/60px "Droid Sans", sans-serif;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-liquid .inner, .btn-liquid-2 .inner {
  position: relative;

  z-index: 2;
}

.btn-liquid canvas, .btn-liquid-2 canvas {
  position: absolute;
  top: -50px;
  right: -50px;
  bottom: -50px;
  left: -50px;

  z-index: 1;
}
.btn-grid{width: 50%;padding: 0 50px}

<!DOCTYPE html>
<html lang="en">
  
<head>
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="btn-grid btn-grid-1">
<a href="http://waaark.com" class="btn-liquid">
    <span class="inner">Liquid button ?</span>
</a>
</div>
<div class="btn-grid btn-grid-2">
<a href="http://waaark.com" class="btn-liquid-2">
    <span class="inner">Liquid button ?</span>
</a>
</div>
</body>
</html>

javascript - JS：在我的页面中放置 2 个液体按钮而不是 1 个

问题描述

解决方案

推荐阅读