彩色滑动特效

浏览网页特效
当前为 2021-08-11 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        彩色滑动特效
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  浏览网页特效
// @author       You
// @match         *://*/*
// @icon         https://www.google.com/s2/favicons?domain=gf.qytechs.cn
// @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中把鼠标事件设为none  通过事件冒泡的方式把事件代理到document上   (防止点击页面中的超链接,选择文字功能失效) 
canvas.style.pointerEvents = "none"

mydiv.appendChild(canvas)

var arr = []
// 拿到2d笔
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
}

// 1.彩色点的构造函数
// function dot(x, y, r, dx, dy) {
//     this._x = x,
//         this._y = y,
//         this.x = x
//     this.y = y,
//         this.r = r,
//         this.dx = dx,
//         this.dy = dy,
//         this.color = getColor(),
//         arr.push(this)
// }

// 2.彩色点的类
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);
欢迎访问Greasy Fork镜像
