承包掘金情人节第一个酷炫 💕

496 阅读1分钟

header

复制下方代码,在浏览器任意窗口的控制台粘贴 ~

var c=document.createElement("canvas");var remove=()=>{c.remove();c.removeEventListener("mouseenter",remove,false)};c.addEventListener("click",remove);document.body.appendChild(c);window.scrollTo(0,0);c.style.zIndex=999;c.style.position="absolute";c.style.left=0;c.style.top=0;var a=c.getContext("2d");e=[];h=[];O=c.width=innerWidth;Q=c.height=innerHeight;v=32;M=Math;R=M.random;C=M.cos;Y=6.3;for(i=0;i<Y;i+=0.2)h.push([O/2+180*M.pow(M.sin(i),3),Q/2+10*-(15*C(i)-5*C(2*i)-2*C(3*i)-C(4*i))]);for(i=0;i<v;){x=R()*O;y=R()*Q;H=80*(i/v)+280;S=40*R()+60;B=60*R()+20;f=[];for(k=0;k<v;)f[k++]={x:x,y:y,X:0,Y:0,R:1-k/v+1,S:R()+1,q:~~(R()*v),D:2*(i%2)-1,F:0.2*R()+0.7,f:"hsla("+~~H+","+~~S+"%,"+~~B+"%,.1)"};e[i++]=f}function _(d){a.fillStyle=d.f;a.beginPath();a.arc(d.x,d.y,d.R,0,Y,1);a.closePath();a.fill()}setInterval(function(){a.fillStyle="rgba(0,0,0,.2)";a.fillRect(0,0,O,Q);for(i=v;i--;){f=e[i];u=f[0];q=h[u.q];D=u.x-q[0];E=u.y-q[1];G=M.sqrt(D*D+E*E);10>G&&(0.95<R()?(u.q=~~(R()*v)):(0.99<R()&&(u.D*=-1),(u.q+=u.D),(u.q%=v),0>u.q&&(u.q+=v)));u.X+=(-D/G)*u.S;u.Y+=(-E/G)*u.S;u.x+=u.X;u.y+=u.Y;_(u);u.X*=u.F;u.Y*=u.F;for(k=0;k<v-1;)(T=f[k]),(N=f[++k]),(N.x-=0.7*(N.x-T.x)),(N.y-=0.7*(N.y-T.y)),_(N)}},25);console.log("%c 愿各位🐒 %c 收获💗 %c  %c 掘金JueJin %c 🐂🍺 ","background:#35495e; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff","background:#41b883; p adding: 1px; border-radius: 0 3px 3px 0;  color: #fff","background:transparent","background: #35495e; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;","background: #41b883; padding: 1px; border-radius: 0 3px 3px 0; color: #fff;");

效果预览:

光线例子❤