彩色滑动特效

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

按住鼠标滑动,即可看到特效
目前为 2021-08-12 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name        彩色滑动特效
// @namespace    http://tampermonkey.net/
// @version      0.5
// @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 = "1000"
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 arr = []
const ctx = canvas.getContext('2d')
document.addEventListener('mousedown', () => {
    arr = []
    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)
    document.addEventListener('mouseup', () => {
        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);