js实现canvas三维文字发光重影鼠标交互效果代码-html代码-BFW代码库

js实现canvas三维文字发光重影鼠标交互效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas三维文字发光重影鼠标交互效果代码

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

<!doctype html>
<html>

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


    <style>
        body, html {
          margin: 0;
          background: -webkit-radial-gradient(center, ellipse cover, #111 10%, #333 90%);
        }
        
        canvas {
          display: block;
          cursor: crosshair;
        }
        
        h2 {
          position: absolute;
          bottom: 10px;
          width: 100%;
          letter-spacing: 4px;
          text-align: center;
          font-weight: bold;
          font-size: 1em;
          font-family: Arial, Helvetica, sans-serif;
          color: #AAA;
        }
    </style>

</head>

<body>

    <canvas id="canvas"></canvas>

    <h2>移动鼠标!</h2>

    <script>
        "use strict";
        
        class Vector {
          constructor(x, y) {
            this.x = x;
            this.y = y;
          }
        
          add(v) {
            return new Vector(
              this.x + v.x,
              this.y + v.y);
          }
        
          addTo(v) {
            this.x += v.x;
            this.y += v.y;
          }
        
          sub(v) {
            return new Vector(
              this.x - v.x,
              this.y - v.y);
          }
          
          subFrom(v) {
            this.x -= v.x;
            this.y -= v.y;
          }
          
          mult(n) {
            return new Vector(this.x * n, this.y * n);
          }
          
          div(n) {
            return new Vector(this.x / n, this.y / n);
          }
          
          setAngle(angle) {
            var length = this.getLength();
            this.x = Math.cos(angle) * length;
            this.y = Math.sin(angle) * length;
          }
          
          setLength(length) {
            var angle = this.getAngle();
            this.x = Math.cos(angle) * length;
            this.y = Math.sin(angle) * length;
          }
          
          getAngle() {
            return Math.atan2(this.y, this.x);
          }
          
          getLength() {
            return Math.sqrt(this.x * this.x + this.y * this.y);
          }
        
          getLengthSq() {
            return this.x * this.x + this.y * this.y;
          }
        
          distanceTo(v) {
            return this.sub(v).getLength();
          }
        }
        
        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 config = {
          text: "Bfw",
          widthToSpikeLengthRatio: 0.054
        };
        
        var colorConfig = {
          particleOpacity: 0.2,
          baseHue: 350,
          hueRange: 9,
          hueSpeed: 0.04,
          colorSaturation: 100
        };
        
        // A line that is part of forming the text
        
        var Planet = function () {
          function Planet(x, y, g) {
            _classCallCheck(this, Planet);
        
            this.pos = new Vector(x, y);
            this.g = g;
          }
        
          _createClass(Planet, [{
            key: "draw",
            value: function draw() {
              ctx.fillStyle = "#AAA";
              ctx.beginPath();
              ctx.arc(this.pos.x, this.pos.y, 8, 0, Math.PI * 2);
              ctx.fill();
            }
          }]);
        
          return Planet;
        }();
        
        var Particle = function () {
          function Particle(x, y) {
            _classCallCheck(this, Particle);
        
            this.pos = new Vector(x, y);
            this.vel = new Vector(0, spikeLength);
          }
        
          _createClass(Particle, [{
            key: "move",
            value: function move(force) {
              if (force) {
                this.vel.addTo(force);
              }
              if (this.vel.getLength() > spi.........完整代码请登录后点击上方下载按钮下载查看