给网站整个手电筒效果

子枫 [Rainy]

发布于 2022-11-07

386 浏览

<p>直接加入下面的js代码即可</p><pre class="brush:html;toolbar:false">&nbsp;&nbsp;document.querySelector(&#39;style&#39;).append(`canvas&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;fixed;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;9999;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pointer-events:&nbsp;none;
&nbsp;&nbsp;&nbsp;&nbsp;}`)
&nbsp;&nbsp;&nbsp;&nbsp;document.body.appendChild(document.createElement(&#39;canvas&#39;))
&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;cvs&nbsp;=&nbsp;document.querySelector(&#39;canvas&#39;)
&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;ctx&nbsp;=&nbsp;cvs.getContext(&#39;2d&#39;)
&nbsp;&nbsp;&nbsp;&nbsp;cvs.width&nbsp;=&nbsp;document.documentElement.clientWidth
&nbsp;&nbsp;&nbsp;&nbsp;cvs.height&nbsp;=&nbsp;document.documentElement.clientHeight
&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;p&nbsp;=&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x:&nbsp;0,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y:&nbsp;0,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r:&nbsp;50
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;document.onmousemove&nbsp;=&nbsp;e&nbsp;=&gt;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p.x&nbsp;=&nbsp;e.clientX
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p.y&nbsp;=&nbsp;e.clientY
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render()
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;render&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath()
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.clearRect(0,&nbsp;0,&nbsp;cvs.width,&nbsp;cvs.height)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;radial&nbsp;=&nbsp;ctx.createRadialGradient(p.x,p.y,p.r,p.x,p.y,p.r&nbsp;*&nbsp;3);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radial.addColorStop(0,&#39;rgba(255,&nbsp;255,&nbsp;255,&nbsp;0)&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radial.addColorStop(1,&#39;rgba(0,&nbsp;0,&nbsp;0,&nbsp;0.5)&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillStyle&nbsp;=&nbsp;radial;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillRect(0,0,cvs.width,&nbsp;cvs.height);
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;render()
&nbsp;&nbsp;&nbsp;&nbsp;window.onresize&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cvs.width&nbsp;=&nbsp;document.documentElement.clientWidth
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cvs.height&nbsp;=&nbsp;document.documentElement.clientHeight
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render()
&nbsp;&nbsp;&nbsp;&nbsp;}</pre><p><img src="/public/upload/image/20221107/1667787542819622.png" title="1667787542819622.png" alt="image.png"/></p>

评论输入框

评论列表

没有任何评论

给网站整个手电筒效果

评论 (56)

分享图片