标签：origin 特效 style 烟花 range context position Math

 //烟花特效
    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)
        }
    }

    try {
        module.exports.default = module.exports = CursorSpecialEffects
    } catch (err) {
        console.log("错误", err);
    }
    var yh = new CursorSpecialEffects();
    yh.init();//烟花特效

标签：origin,特效,style,烟花,range,context,position,Math
来源： https://www.cnblogs.com/huluxia-fun/p/15215930.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。