基于 sketch.js 实现非常酷炫的鼠标点击特效

JavaScript 是浏览器端脚本语言，有许多非常实用的第三方 JS 类库，我们可以借助它来实现各种各样的特效，今天为大家分享一下基于 sketch.js 实现鼠标点击特效的方法。

实现方法

实现的方法很简单，只需要以下三步就可以完成。

引入sketch.js

在 functions.php 文件中引入 sketch.min.js，文件下载地址：

https://www.bootcdn.cn/sketch.js。

添加 html 代码

然后在 body 标签中任意位置加入下面这段 HTML 代码。

<?php !wp_is_mobile()): //排除移动设备 ?>
<canvas  id="mineCanvas" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<?php endif; ?>

添加 js 代码

将下面的 JS 代码添加到 footer.php 中，也可以将内容添加到 sketch.min.js 文件末尾。

<script type='text/javascript'>
if(document.getElementById("clickCanvas")) {
    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 = '#ffeb3b';

            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();
        }
    };
    var MAX_PARTICLES = 50;
    //圆点颜色库
    var COLOURS = [ "#5ee4ff", "#f44033", "#ffeb3b", "#F38630", "#FA6900", "#f403e8", "#F9D423" ];
    var particles = [];
    var pool = [];
    var clickparticle = Sketch.create({
        container : document.getElementById('clickCanvas')
    });
    clickparticle.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, 20));//圆点大小范围
        particle.wander = random(0.5, 2.0);
        particle.color = random(COLOURS);
        particle.drag = random(0.9, 0.99);
        theta = random(TWO_PI);
        force = random(1, 5);
        particle.vx = sin(theta) * force;
        particle.vy = cos(theta) * force;
        particles.push(particle);
    };
    clickparticle.update = function() {
        var 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]);
        }
    };
    clickparticle.draw = function() {
        clickparticle.globalCompositeOperation = 'lighter';
        for ( var i = particles.length - 1; i >= 0; i--) {
            particles[i].draw(clickparticle);
        }
    };
    //按下时显示效果，mousedown 换成 click 为点击时显示效果
    document.addEventListener("mousedown", function(e) {
        var max, j;
        //排除一些元素
        "TEXTAREA" !== e.target.nodeName && "INPUT" !== e.target.nodeName && "A" !== e.target.nodeName && "I" !== e.target.nodeName && "IMG" !== e.target.nodeName 
        && function() {
            for (max = random(15, 20), j = 0; j < max; j++) 
            clickparticle.spawn(e.clientX, e.clientY);
        }();
    });
}
</script>

结束语

本文简单分享了一下基于 sketch.js 实现的鼠标点击特效的方法，如果大家喜欢的话可以添加到自己的网站上。引入额外的 JS 代码会影响网页的加载速度，大家可以有选择性地使用。另外，大家如果有更好的建议，欢迎在下方评论处分享。