html实现圈内特效

最新推荐文章于 2022-08-02 22:12:52 发布

L在前方

最新推荐文章于 2022-08-02 22:12:52 发布

阅读量124

点赞数

分类专栏：前端（Html+CSS+JavaScript）文章标签： html

本文链接：https://blog.csdn.net/qq_45828598/article/details/109403443

版权

前端（Html+CSS+JavaScript）专栏收录该内容

14 篇文章 0 订阅

订阅专栏

实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  body {
  background: #000;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

canvas.interactive {
  cursor: none;
}
  </style>
 </HEAD>

 <BODY>
   <canvas id="canvas"></canvas>
   <script>
   var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Canvas = function () {
  function Canvas(element, ctx, w, h) {
    _classCallCheck(this, Canvas);

    this.element = element;
    this.ctx = ctx;
    this.width = w;
    this.height = h;

    this.interactive = false;
    this.playing = true;

    this.point = {
      value: 150,
      speed: 0.25,
      limit: 70,
      floor: 10,
      up: true,
      animating: false
    };

    this.multiplier = {
      value: 1,
      speed: 0.005,
      limit: 20,
      floor: 1,
      up: true,
      animating: true
    };

    this.center = {
      x: w / 2,
      y: h / 2,
      targetX: w / 2,
      targetY: h / 2,
      easing: 0.02
    };

    this.radius = {
      val: h / 2.2,
      targetVal: h / 2.2,
      easing: 0.02
    };

    document.body.addEventListener('click', this.click.bind(this));
    document.body.addEventListener('mousemove', this.move.bind(this));
    document.body.addEventListener('keyup', this.keyup.bind(this));

    this.hue = 160;
  }

  _createClass(Canvas, [{
    key: 'click',
    value: function click(e) {
      this.interactive = !this.interactive;

      if (!this.interactive) {
        this.center.targetX = this.width / 2;
        this.center.targetY = this.height / 2;
        this.radius.targetVal = this.height / 2.2;

        this.element.classList.remove('interactive');
      } else {
        this.element.classList.add('interactive');
      }
    }
  }, {
    key: 'move',
    value: function move(e) {
      if (!this.interactive) {
        return;
      }

      var h3 = this.height / 3;

      this.center.targetX = e.pageX;
      this.center.targetY = Math.max(e.pageY, h3);

      this.radius.targetVal = h3 + e.pageY * 0.8;
    }
  }, {
    key: 'keyup',
    value: function keyup(e) {
      if (e.which != 32) {
        return;
      }

      this.playing = !this.playing;

      if (this.playing && this.drawLoop) {
        this.drawLoop();
      }
    }
  }, {
    key: 'update',
    value: function update() {
      this.clear();

      this.animate(this.point);
      this.animate(this.multiplier);
      this.ease(this.center);
      this.ease(this.radius);

      this.hue += 0.3;

      var h = this.hue % 360;

      this.ctx.fillStyle = 'hsl(' + h + ',70%,20%)';
      this.ctx.strokeStyle = 'hsla(' + h + ',80%,60%,0.2)';
      this.ctx.globalCompositeOperation = 'lighter';
    }
  }, {
    key: 'clear',
    value: function clear() {
      this.ctx.globalCompositeOperation = 'source-over';
      this.ctx.fillStyle = 'rgba(0,0,0,0.1)';
      this.ctx.rect(0, 0, this.width, this.height);
      this.ctx.fill();
    }
  }, {
    key: 'draw',
    value: function draw() {
      var radius = this.radius.val;

      var w2 = this.center.x,
          h2 = this.center.y;

      this.ctx.beginPath();
      this.ctx.shadowBlur = 0;
      this.ctx.shadowColor = 'black';

      var points = this.point.value;
      var multiplier = this.multiplier.value;

      for (var p = 0; p < points; p++) {
        var t = p / points * Math.PI * 2;
        var t2 = p * multiplier / points * Math.PI * 2;
        var x = radius * Math.cos(t) + w2;
        var y = radius * Math.sin(t) + h2;
        var x2 = radius * Math.cos(t2) + w2;
        var y2 = radius * Math.sin(t2) + h2;

        this.ctx.moveTo(x, y);
        this.ctx.lineTo(x2, y2);
      }

      this.ctx.arc(w2, h2, radius, 0, 2 * Math.PI);

      this.ctx.stroke();
      this.ctx.closePath();
    }
  }, {
    key: 'animate',
    value: function animate(object) {
      if (!object.animating) {
        return;
      }

      if (object.up) {
        object.value += object.speed;
      } else {
        object.value -= object.speed;
      }

      if (object.value > object.limit) {
        object.up = false;
      } else if (object.value < object.floor) {
        object.up = true;
      }
    }
  }, {
    key: 'ease',
    value: function ease(object) {
      if (object.val) {
        var dv = object.targetVal - object.val;
        object.val += dv * object.easing;

        return;
      }

      var dx = object.targetX - object.x;
      var dy = object.targetY - object.y;
      object.x += dx * object.easing;
      object.y += dy * object.easing;
    }
  }, {
    key: 'random',
    value: function random(from, to) {
      return from + Math.rand() * (to - from);
    }
  }, {
    key: 'resize',
    value: function resize(w, h) {
      this.width = w;
      this.height = h;
      this.center.targetX = w / 2;
      this.center.targetY = h / 2;

      this.radius.targetVal = h / 2.2;
    }
  }]);

  return Canvas;
}();

(function (_) {
  var canvasElement = document.getElementById('canvas'),
      ctx = canvasElement.getContext('2d');

  var w = canvasElement.width = window.innerWidth,
      h = canvasElement.height = window.innerHeight,
      density = 1;

  var canvas = new Canvas(canvasElement, ctx, w, h);

  function setup() {
    window.addEventListener('resize', resize);

    density = window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0;

    canvasElement.width = w * density;
    canvasElement.height = h * density;

    canvas.width = w;
    canvas.height = h;
    canvas.drawLoop = draw;

    ctx.scale(density, density);

    draw();
  }

  function draw() {
    canvas.update();
    canvas.draw();

    if (canvas.playing) {
      window.requestAnimationFrame(draw);
    }
  }

  function resize() {
    w = canvasElement.width = window.innerWidth;
    h = canvasElement.height = window.innerHeight;

    canvasElement.width = w * density;
    canvasElement.height = h * density;

    canvas.resize(w, h);

    ctx.scale(density, density);
  }

  setup();
})();
   </script>
 </BODY>
</HTML>

实现结果：

在这里插入图片描述

L在前方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html实现圈内特效

实现代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Ke
复制链接

扫一扫

专栏目录