前段时间一为分享了一个canvas点击效果，偶然间发现在 Mac OS 上的 safari 浏览器效率很差，点几下网页就卡成渣了，后来找到了一个基于sketch.js效果，sketch 效率也高很多，完全不会卡，修改了一下替换了之前的，一直在用，然后好多小伙伴问我的点击效果怎么跟我发出来的不一样，在此特意更新下新的代码。
JS代码
代码中包含了sketch.min.js的源码，如果你的网站已经引用了，请删掉下面的6到7行。
/*
* 鼠标点击特效，canvas点击效果，第二版
* 原文地址：https://www.iowen.cn/canvas-click-effect-second-edition
*/
/* Copyright (C) 2013 Justin Windle sketch.min.js, http://soulwire.co.uk */
var Sketch=function(){"use strict";function e(e){return"[object Array]"==Object.prototype.toString.call(e)}function t(e){return"function"==typeof e}function n(e){return"number"==typeof e}function o(e){return"string"==typeof e}function r(e){return E[e]||String.fromCharCode(e)}function i(e,t,n){for(var o in t)(n||!e.hasOwnProperty(o))&&(e[o]=t[o]);return e}function u(e,t){return function(){e.apply(t,arguments)}}function a(e){var n={};for(var o in e)n[o]=t(e[o])?u(e[o],e):e[o];return n}function c(e){function n(n){t(n)&&n.apply(e,[].splice.call(arguments,1))}function u(e){for(_=0;_<J.length;_++)G=J[_],o(G)?O[(e?"add":"remove")+"EventListener"].call(O,G,k,!1):t(G)?k=G:O=G}function c(){L(T),T=I(c),U||(n(e.setup),U=t(e.setup),n(e.resize)),e.running&&!j&&(e.dt=(B=+new Date)-e.now,e.millis+=e.dt,e.now=B,n(e.update),e.autoclear&&K&&e.clear(),n(e.draw)),j=++j%e.interval}function l(){O=Y?e.style:e.canvas,D=Y?"px":"",e.fullscreen&&(e.height=w.innerHeight,e.width=w.innerWidth),O.height=e.height+D,O.width=e.width+D,e.retina&&K&&X&&(O.height=e.height*X,O.width=e.width*X,O.style.height=e.height+"px",O.style.width=e.width+"px",e.scale(X,X)),U&&n(e.resize)}function s(e,t){return N=t.getBoundingClientRect(),e.x=e.pageX-N.left-w.scrollX,e.y=e.pageY-N.top-w.scrollY,e}function f(t,n){return s(t,e.element),n=n||{},n.ox=n.x||t.x,n.oy=n.y||t.y,n.x=t.x,n.y=t.y,n.dx=n.x-n.ox,n.dy=n.y-n.oy,n}function g(e){if(e.preventDefault(),W=a(e),W.originalEvent=e,W.touches)for(M.length=W.touches.length,_=0;_<W.touches.length;_++)M[_]=f(W.touches[_],M[_]);else M.length=0,M[0]=f(W,V);return i(V,M[0],!0),W}function h(t){for(t=g(t),q=(Q=J.indexOf(z=t.type))-1,e.dragging=/down|start/.test(z)?!0:/up|end/.test(z)?!1:e.dragging;q;)o(J[q])?n(e[J[q--]],t):o(J[Q])?n(e[J[Q++]],t):q=0}function p(t){F=t.keyCode,H="keyup"==t.type,Z[F]=Z[r(F)]=!H,n(e[t.type],t)}function v(t){e.autopause&&("blur"==t.type?b:C)(),n(e[t.type],t)}function C(){e.now=+new Date,e.running=!0}function b(){e.running=!1}function P(){(e.running?b:C)()}function A(){K&&e.clearRect(0,0,e.width,e.height)}function S(){R=e.element.parentNode,_=x.indexOf(e),R&&R.removeChild(e.element),~_&&x.splice(_,1),u(!1),b()}var T,k,O,R,N,_,D,B,G,W,z,F,H,q,Q,j=0,M=[],U=!1,X=w.devicePixelRatio,Y=e.type==m,K=e.type==d,V={x:0,y:0,ox:0,oy:0,dx:0,dy:0},J=[e.element,h,"mousedown","touchstart",h,"mousemove","touchmove",h,"mouseup","touchend",h,"click",y,p,"keydown","keyup",w,v,"focus","blur",l,"resize"],Z={};for(F in E)Z[E[F]]=!1;return i(e,{touches:M,mouse:V,keys:Z,dragging:!1,running:!1,millis:0,now:0/0,dt:0/0,destroy:S,toggle:P,clear:A,start:C,stop:b}),x.push(e),e.autostart&&C(),u(!0),l(),c(),e}for(var l,s,f="E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor log round sin sqrt tan atan2 pow max min".split(" "),g="__hasSketch",h=Math,d="canvas",p="webgl",m="dom",y=document,w=window,x=[],v={fullscreen:!0,autostart:!0,autoclear:!0,autopause:!0,container:y.body,interval:1,globals:!0,retina:!1,type:d},E={8:"BACKSPACE",9:"TAB",13:"ENTER",16:"SHIFT",27:"ESCAPE",32:"SPACE",37:"LEFT",38:"UP",39:"RIGHT",40:"DOWN"},C={CANVAS:d,WEB_GL:p,WEBGL:p,DOM:m,instances:x,install:function(t){if(!t[g]){for(var o=0;o<f.length;o++)t[f[o]]=h[f[o]];i(t,{TWO_PI:2*h.PI,HALF_PI:h.PI/2,QUATER_PI:h.PI/4,random:function(t,o){return e(t)?t[~~(h.random()*t.length)]:(n(o)||(o=t||1,t=0),t+h.random()*(o-t))},lerp:function(e,t,n){return e+n*(t-e)},map:function(e,t,n,o,r){return(e-t)/(n-t)*(r-o)+o}}),t[g]=!0}},create:function(e){return e=i(e||{},v),e.globals&&C.install(self),l=e.element=e.element||y.createElement(e.type===m?"div":"canvas"),s=e.context=e.context||function(){switch(e.type){case d:return l.getContext("2d",e);case p:return l.getContext("webgl",e)||l.getContext("experimental-webgl",e);case m:return l.canvas=l}}(),e.container.appendChild(l),C.augment(s,e)},augment:function(e,t){return t=i(t||{},v),t.element=e.canvas||e,t.element.className+=" sketch",i(e,t,!0),c(e)}},b=["ms","moz","webkit","o"],P=self,A=0,S="AnimationFrame",T="request"+S,k="cancel"+S,I=P[T],L=P[k],O=0;O<b.length&&!I;O++)I=P[b[O]+"Request"+S],L=P[b[O]+"Cancel"+T];return P[T]=I=I||function(e){var t=+new Date,n=h.max(0,16-(t-A)),o=setTimeout(function(){e(t+n)},n);return A=t+n,o},P[k]=L=L||function(e){clearTimeout(e)},C}();
//---
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 为点击时显示效果（我用的 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);
}();
});
}
部署方法
方法和上次的一样的，复制上面的 js 代码到主题的主 js 文件最下面，或者保存为一个单独的 js 文件，然后引入主题。
如果你是单独保存为一个 js 文件，请在 footer 引入js文件，感谢『澍.』的反馈
然后在页面 body 标签中加入 <div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:999999999;pointer-events:none;"></div>WordPress 主题可以找主题的 header.php 文件在<body>下方（如果 header.php 中没有，请全盘搜素下 <body ），加入以下代码。
<?php if(!wp_is_mobile()): ?> <div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:999999999;pointer-events:none;"></div> <?php endif; ?>
如果移动端也想要这效果，请删除上面代码的第1行和第3行
自定义
如果你不喜欢，可以自定义一些设置，比如大小、颜色、速度等，看参数名称调整就可以了。
时易世变 ( VIP 1 )
天津请问，主题开启了pjax，点击特效只在第一次进入主页时有效，再点进其他页面就没有了，该怎么办呢？
耗子尾汁 ( VIP 1 )
广西太谢谢了
毛毛锟斤拷猫猫锟斤拷 ( VIP 1 )
广东牛逼啊
菜鸟 ( VIP 1 )
江苏真好看，收下了，谢谢博主！
jaocky ( VIP 1 )
未知请问如何才能不让移动端有点击效果，试了手机好像还是有这个效果
梅锟街帮拷锟斤拷锟斤拷路锟斤拷 ( VIP 1 )
安徽如何引用js
陈 ( VIP 1 )
安徽MoXtar ( VIP 1 )
江苏感谢大佬分享，我自用的时候在js代码里加了两句生成div块的代码，这样就不需要手动单独去添加一个div块了
var canvas = document.createElement('div');
canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;z-index: 999999999;pointer-events: none;');
canvas.setAttribute('id', 'clickCanvas');
document.getElementsByTagName('body')[0].appendChild(canvas);
婉言如歌 ( VIP 1 )
山东我好像评论错了，我像评论的是关于站长发布的代码框高亮那个插件。
婉言如歌 ( VIP 1 )
山东非常好看，只是不支持php7.1。另外我使用PHP7.4启用后背景色是黑色，和站长的不一样，右上角也只显示一个复制。不知道为啥
成人之美 ( VIP 1 )
河南不错，看起来的确漂亮啊。
一为 ( VIP 6 )
湖南@成人之美 谢谢
Crueyl ( VIP 2 )
安徽小白一个
目录下的js/sketch.min.js已经创建了
在footer.php最下面倒数第三行添加了这段代码
但是还是没效果啊,不知道具体怎么弄
Crueyl ( VIP 2 )
安徽@Crueyl 倒数第三行
Crueyl ( VIP 2 )
安徽@Crueyl 添加的那段发不出来
就是你上面发的那3段php if的代码
在加上一段
Crueyl ( VIP 2 )
安徽@Crueyl
一为 ( VIP 6 )
湖南@Crueyl 再仔细对照做一下，教程稍微调整了一下。如果不行，地址发一下
Crueyl ( VIP 2 )
安徽@一为 嗯,这下搞定了,谢谢
之前搞错了,把最下面那3段代码放到footer.php去了,
现在放到header.php一切正常了
那莫雨 ( VIP 1 )
上海超级喜欢这个 特效 感谢大佬分享。很想自己也做一个，超级小白
，代码什么意思真的一个都不懂，不敢乱添加，主题的主 js 文件有好几个不知道是哪个是主js，还有footer.php 文件，合适的位置，不懂代码真的不知道那合适 
总结；小白的我看不懂这部署方法。你等我有时间了 我要一个一个试 
一为 ( VIP 6 )
湖南@那莫雨 你可以单独保存为一个 js 文件，在 footer 引入js
Fanyang ( VIP 2 )
北京简直完美，感谢大佬分享~~~
一为 ( VIP 6 )
湖南@Fanyang 哈哈，感谢支持
abc ( VIP 1 )
河南求鼠标指针样式
一为 ( VIP 6 )
湖南@abc F12找图片素材