不知道为什么，最近看到的都是烟花特效，小球下落几乎看不到了，我在这里补一下。

//点击特效 class Circle { constructor({ origin, speed, color, angle, context }) { this.origin = origin this.position = { …this.origin } this.color = color this.speed = speed this.angle = angle this.context = context this.renderCount = 0 }

draw() {
    this.context.fillStyle = this.color
    this.context.beginPath()
    this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
    this.context.fill()
}

move() {
    this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
    this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
    this.renderCount++
}

}

class Boom { constructor({ origin, context, circleCount = 10, area }) { this.origin = origin this.context = context this.circleCount = circleCount this.area = area this.stop = false this.circles = [] }

randomArray(range) {
    const length = range.length
    const randomIndex = Math.floor(length * Math.random())
    return range[randomIndex]
}

randomColor() {
    const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
    return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
}

randomRange(start, end) {
    return (end - start) * Math.random() + start
}

init() {
    for (let i = 0; i < this.circleCount; i++) {
        const circle = new Circle({
            context: this.context,
            origin: this.origin,
            color: this.randomColor(),
            angle: this.randomRange(Math.PI - 1, Math.PI + 1),
            speed: this.randomRange(1, 6)
        })
        this.circles.push(circle)
    }
}

move() {
    this.circles.forEach((circle, index) => {
        if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
            return this.circles.splice(index, 1)
        }
        circle.move()
    })
    if (this.circles.length == 0) {
        this.stop = true
    }
}

draw() {
    this.circles.forEach(circle => circle.draw())
}

}

class CursorSpecialEffects { constructor() { this.computerCanvas = document.createElement(‘canvas’) this.renderCanvas = document.createElement(‘canvas’)

    this.computerContext = this.computerCanvas.getContext('2d')
    this.renderContext = this.renderCanvas.getContext('2d')

    this.globalWidth = window.innerWidth
    this.globalHeight = window.innerHeight

    this.booms = []
    this.running = false
}

handleMouseDown(e) {
    const boom = new Boom({
        origin: { x: e.clientX, y: e.clientY },
        context: this.computerContext,
        area: {
            width: this.globalWidth,
            height: this.globalHeight
        }
    })
    boom.init()
    this.booms.push(boom)
    this.running || this.run()
}

handlePageHide() {
    this.booms = []
    this.running = false
}

init() {
    const style = this.renderCanvas.style
    style.position = 'fixed'
    style.top = style.left = 0
    style.zIndex = '999999999999999999999999999999999999999999'
    style.pointerEvents = 'none'

    style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
    style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight

    document.body.append(this.renderCanvas)

    window.addEventListener('mousedown', this.handleMouseDown.bind(this))
    window.addEventListener('pagehide', this.handlePageHide.bind(this))
}

run() {
    this.running = true
    if (this.booms.length == 0) {
        return this.running = false
    }

    requestAnimationFrame(this.run.bind(this))

    this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
    this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)

    this.booms.forEach((boom, index) => {
        if (boom.stop) {
            return this.booms.splice(index, 1)
        }
        boom.move()
        boom.draw()
    })
    this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
}

}

const cursorSpecialEffects = new CursorSpecialEffects() cursorSpecialEffects.init()