彩色滑动特效

Greasy Fork is available in English.
彩色滑动特效

按住鼠标滑动,即可看到特效
目前为 2022-10-12 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name        彩色滑动特效
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  按住鼠标滑动,即可看到特效
// @author       wuyupei
// @match         *://*/*
// @icon         https://www.google.com/s2/favicons?domain=greasyfork.org
// @grant        none
// ==/UserScript==

(function() {
const mydiv = document.createElement('div');
      mydiv.style.width = 100 + 'vw';
      mydiv.style.height = 100 + 'vh';
      mydiv.style.position = 'fixed';
      mydiv.style.top = 0 + 'px';
      mydiv.style.left = 0 + 'px';
      mydiv.style.right = 0 + 'px';
      mydiv.style.bottom = 0 + 'px';
      mydiv.style.pointerEvents = 'none';
      mydiv.style.zIndex = '1000000000000000000000000000';
      document.body.appendChild(mydiv);

      const canvas = document.createElement('canvas');
      canvas.className = 'canvas';
      canvas.setAttribute('width', document.body.clientWidth);
      canvas.setAttribute('height', 720);
      canvas.style.position = 'absolute';
      canvas.style.top = 0 + 'px';
      canvas.style.left = 0 + 'px';
      canvas.style.right = 0 + 'px';
      canvas.style.bottom = 0 + 'px';
      canvas.style.zIndex = '2000';
      canvas.style.pointerEvents = 'none';
      mydiv.appendChild(canvas);
      var flag = false;
      var arr = [];
      const ctx = canvas.getContext('2d');
      document.addEventListener('mousedown', (e) => {
        // 鼠标中建点击
        if (e.button === 1) {
          arr = [];
          flag = !flag;
          if (flag) {
            const startTimer = setInterval(() => {
              ctx.clearRect(0, 0, canvas.width, canvas.height);
              for (var i = 0; i < arr.length; i++) {
                arr[i].render();
                arr[i].update();
                arr[i].remove();
              }
            }, 20);
            document.addEventListener('mousemove', begindrow);
          } else {
            document.removeEventListener('mousemove', begindrow);
            clearInterval(startTimer);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
          }
        }
      });

      function begindrow(e) {
        new dot(e.clientX, e.clientY, 2, 0, -1);
        // new dot(e.clientX, e.clientY, 2, 0, 1)
        // new dot(e.clientX, e.clientY, 2, 1, 0)
        // new dot(e.clientX, e.clientY, 2, -1, 0)
      }

      function getColor() {
        var colorarr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
        var color = '#';
        for (var i = 0; i < 6; i++) {
          color += colorarr[Math.floor(Math.random() * colorarr.length)];
        }
        return color;
      }

      class dot {
        constructor(x, y, r, dx, dy) {
          this.x = x;
          this.y = y;
          this.r = r;
          this.dx = dx;
          this.dy = dy;
          this._x = x;
          this._y = y;
          this.color = getColor();
          arr.push(this);
        }
      }
      dot.prototype.render = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
        ctx.fillStyle = this.color;
        ctx.fill();
      };

      dot.prototype.update = function () {
        this.x += this.dx;
        this.y += this.dy;
      };

      dot.prototype.remove = function () {
        if (
          this.x - this._x >= 25 ||
          this.x - this.x <= -25 ||
          this.y - this._y >= 25 ||
          this.y - this._y <= -25
        ) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
      };
})(document);