纯前端超酷炫鼠标烟花特效！基于sketch.js （非原创）

鼠标烟花特效

前言

先申明一下，代码并非本人原创！
是在jq22无意看到一款炒鸡酷炫的鼠标烟花特效
地址如下：http://www.jq22.com/jquery-info3511
原作者ID： @菲利克斯诗音

本着不重复发明轮子的想法。
本人只是在原代码内做了一个精简，
只保留下了烟花的部分。
方便以后直接套用。

---

最终效果

---

在线演示

在线演示: https://tczmh.gitee.io/fireworks

源码地址

Gitee: https://gitee.com/tczmh/fireworks
Github: https://github.com/18121259693/fireworks

---

主要内容

烟花的核心部分只有3个

一个透明全屏的div

<div id="fireworks"></div>

div推荐样式

position: fixed;
top: 0px;
z-index: 9999;

引入依赖 sketch.min.js

<script src="js/sketch.min.js"></script>

以及引入最终的实现的js
(默认绘画在id=fireworks的DIV上，可以在代码里修改)

<script src="js/fireworks.js"></script>

核心代码就是fireworks.js

function Particle(x, y, radius) {
    this.init(x, y, radius);
}

Particle.prototype = {
    init: function (x, y, radius) {
        this.alive = true;
        this.radius = radius || 10;
        this.wander = 0.15;
        this.theta = random(TWO_PI);
        this.drag = 0.92;
        this.color = '#fff';
        this.x = x || 0.0;
        this.y = y || 0.0;
        this.vx = 0.0;
        this.vy = 0.0;
    },
    move: function () {
        this.x += this.vx;
        this.y += this.vy;
        this.vx *= this.drag;
        this.vy *= this.drag;
        this.theta += random(-0.5, 0.5) * this.wander;
        this.vx += sin(this.theta) * 0.1;
        this.vy += cos(this.theta) * 0.1;
        this.radius *= 0.96;
        this.alive = this.radius > 0.5;
    },
    draw: function (ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
        ctx.fillStyle = this.color;
        ctx.fill();
    }
};
let MAX_PARTICLES = 280;
let COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900',
    '#FF4E50', '#F9D423'];
let particles = [];
let pool = [];
let demo = Sketch.create({
    container: document.getElementById('fireworks')
});
demo.spawn = function (x, y) {
    if (particles.length >= MAX_PARTICLES)
        pool.push(particles.shift());
    particle = pool.length ? pool.pop() : new Particle();
    particle.init(x, y, random(5, 40));
    particle.wander = random(0.5, 2.0);
    particle.color = random(COLOURS);
    particle.drag = random(0.9, 0.99);
    theta = random(TWO_PI);
    force = random(2, 8);
    particle.vx = sin(theta) * force;
    particle.vy = cos(theta) * force;
    particles.push(particle);
};
demo.update = function () {
    let i, particle;
    for (i = particles.length - 1; i >= 0; i--) {
        particle = particles[i];
        if (particle.alive)
            particle.move();
        else
            pool.push(particles.splice(i, 1)[0]);
    }
};
demo.draw = function () {
    demo.globalCompositeOperation = 'lighter';
    for (let i = particles.length - 1; i >= 0; i--) {
        particles[i].draw(demo);
    }
};
demo.mousemove = function () {
    let touch, max, i, j, n;
    for (i = 0, n = demo.touches.length; i < n; i++) {
        touch = demo.touches[i], max = random(1, 4);
        for (j = 0; j < max; j++) {
            demo.spawn(touch.x, touch.y);
        }
    }
};

其余内容不再一一赘述，建议直接参考码云或Github上的代码。

---

END

顺便打个小小广告
极简壁纸: https://bz.zzzmh.cn