Swallow

鼠标点击特效,canvas点击效果

 4个月前 (08-12)     394  
文章目录

今天看到一个 canvas 点击效果,甚是喜欢 :mrgreen: 就下载下来想加到网站,就是现在你们点击时看到的效果,但是源码有问题啊,不是被网页原本的元素覆盖就是覆盖网页原有的元素,有点拗,将就看吧 :evil: ,然后怎么办?修改呗。 :oops:

鼠标点击特效,canvas点击效果

有新版更新,效率更高

Swallow 鼠标点击特效,canvas点击效果,第二版 前段时间一为分享了一个canvas点击效果,偶然间发现在 Mac OS 上的 safari 浏…… 4周前 (11-15) 203 6

思路

(学大佬们的套路,写写思路,哈哈)

  1. 因为被网页原本的元素覆盖,所以把 canvas  的 z-index 开高,就 99999999 吧。
  2. z-index置顶了,覆盖了网页所有元素的事件,设置下它的 pointer-events: none。
  3. 好了,网页所有元素的事件正常了, canvas  效果点击没反应了,修改 JS 解决,不用 canvas  层接收事件,收集document点击事件触发 canvas  的效果。
  4. 排除 a 、 img 等标签。

差不多了,其他的看代码把。

JS代码

/*
 * 鼠标点击特效,canvas点击效果
 * 原文地址:https://www.iowen.cn/mouse-click-effect-canvas-click-effect
 */
const cnv = document.getElementById('mineCanvas');
if(cnv){
    let ctx = cnv.getContext('2d');

    // 基础配置
    let count = 20;//圆点数量
    let innerRadius = 20;
    let outterRadius = 80;
    let moreOutterRadius = 120;
    let easing = 0.05;
    let mcolor = [
        'rgba(244,64,51,.6)',
        'rgba(255,235,59,.6)',
        'rgba(244,3,232,.6)'
    ]

    // 窗口变化重置 canvas 大小
    window.onresize=function(){resize();};
    function resize() {
        cnv.width = window.innerWidth;
        cnv.height = window.innerHeight;
    }

    window.onload = function () {
        // 初始化宽高
        resize();
        let mouse = new Mouse();
        mouse.getMousePosition(document);
        document.addEventListener('click', function(e){
            let balls = getEnoughBall(count, mouse.x, mouse.y);
            let circle = new Ball(mouse.x, mouse.y, innerRadius, 'rgba(244,64,51,.6)');
            var opacticy = 0.6;
            //排除一些元素
            "TEXTAREA" !== e.target.nodeName && "INPUT" !== e.target.nodeName && "A" !== e.target.nodeName && "I" !== e.target.nodeName && "IMG" !== e.target.nodeName
            && (function animation() {
                requestAnimationFrame(animation);
                ctx.clearRect(0, 0, cnv.width, cnv.height);
                balls.forEach(item => {
                    item.draw('fill');
                    // 缓动动画
                    item.vx = (item.dx - item.x) * easing;
                    item.vy = (item.dy - item.y) * easing;
                    item.x += item.vx;
                    item.y += item.vy;
                    item.sx += -item.sx * easing;
                    item.sy += -item.sy * easing;
                })

                circle.draw('stroke');
                circle.radius += (outterRadius - circle.radius) * easing;
                opacticy = opacticy - 0.6 * easing;
                circle.color = `rgba(244, 67, 54, ${opacticy})`
            })()
        }, false)
    }

    function getEnoughBall(num, mouseX, mouseY) {
        var balls = [];
        for (let i = 0; i < num; i++) {
            var ball = new Ball(0, 0, Math.random() * (20 - 5 + 1) + 5, mcolor[parseInt(Math.random() * 3)]);//随机初始大小
            ball.x = mouseX + Math.random() * innerRadius - Math.random() * innerRadius;
            ball.y = mouseY + Math.random() * innerRadius - Math.random() * innerRadius;

            // 计算最终位置
            var x = mouseX - ball.x;
            var y = mouseY - ball.y;
            var scale = Math.abs(x / y);
            ball.dx = (x < 0 ? 1 : -1) * moreOutterRadius / Math.sqrt(scale * scale + 1) * Math.random() * scale + mouseX;
            ball.dy = (y < 0 ? 1 : -1) * moreOutterRadius / Math.sqrt(scale * scale + 1) * Math.random() + mouseY;
            balls.push(ball);
        }
        return balls;
    }

    // ball class
    class Ball {
        constructor(x, y, radius, color) {
            this.x = x || 0;
            this.y = y || 0;
            this.vx = 0;
            this.vy = 0;
            this.sx = 1;
            this.sy = 1;
            this.radius = radius || 10;
            this.color = color || 'black';
        }
        draw(type) {
            if (['fill', 'stroke'].indexOf(type) == -1) {
                throw ('ball.draw need a right type');
            }
            ctx.save();
            ctx.translate(this.x, this.y);
            ctx.scale(this.sx, this.sy);
            ctx.fillStyle = this.color;
            ctx.strokeStyle = this.color;
            ctx.beginPath();
            ctx.arc(0, 0, this.radius, 0, 360 * Math.PI / 180);
            ctx.closePath();
            type === 'fill' ? ctx.fill() : ctx.stroke();
            ctx.restore();
        }
    }

    // mouse class
    class Mouse {
        constructor() {
            this.x = 0;
            this.y = 0;
        }
        getMousePosition(c) {
            c.addEventListener('click', (e) => {
                this.x = e.clientX - cnv.offsetLeft;
                this.y = e.clientY - cnv.offsetTop;
            }, false)
        }
    }
}

部署方法

复制 js 代码到主题主 js 最下面;或者保存为单独的文件,然后引入主题,然后在 页面 body 标签中加入 <canvas id="mineCanvas" ></canvas>WordPress 主题可以找主题的 header.php 或者 footer.php 文件,再任意一个合适的位置加入下方代码,加一个地方就可以了,

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

好了完美,喜欢的话记得打赏、点赞、分享 :wink:

建站技巧 给网站添加“富强、民主、和谐、爱国”鼠标点击特效 给网站添加“富强、民主、和谐、爱国”鼠标点击特效。这个特效网上也有许多教程…… 9个月前 (03-04) 588 0
版权声明:一为 发表于 4个月前 (08-12),共 3304 字。
转载请注明:鼠标点击特效,canvas点击效果 | 一为忆

2 条评论

  • avatar

    犬青 ( VIP 1 )

    回复

    你好,我看这篇然后试了一下,和你的效果差的有点大,动画没有你的生动,能分享下你现在用的代码吗?谢谢

2019/12/2 17:30
WebStack 导航主题升级 Font Awesome 5 图标库 详情