按住鼠标滑动,即可看到特效
当前为
// ==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);