网页手电筒效果脚本

分类：JS 发布时间：2022-11-07 10:34:59

按住 ctrl 触发 ``` function sdt() { document.querySelector('style').append(`canvas { position: fixed; left:0; top: 0; z-index: 9999; pointer-events: none; }`) document.body.appendChild(document.createElement('canvas')) const cvs = document.querySelector('canvas') const ctx = cvs.getContext('2d') cvs.width = document.documentElement.clientWidth cvs.height = document.documentElement.clientHeight const p = { x: 0, y: 0, r: 50 } document.onmousemove = e => { p.x = e.clientX p.y = e.clientY render() } const render = () => { ctx.beginPath() ctx.clearRect(0, 0, cvs.width, cvs.height) var radial = ctx.createRadialGradient(p.x, p.y, p.r, p.x, p.y, p.r * 3); radial.addColorStop(0, 'rgba(255, 255, 255, 0)'); radial.addColorStop(1, 'rgba(0, 0, 0, 0.5)'); ctx.fillStyle = radial; ctx.fillRect(0, 0, cvs.width, cvs.height); } render() window.onresize = () => { cvs.width = document.documentElement.clientWidth cvs.height = document.documentElement.clientHeight render() } } $(document).keydown(function(event){ if(!canvas_enable && event.keyCode == 17){ canvas_enable = true sdt() } }); $(document).keyup(function(event){ if(event.keyCode == 17){ canvas_enable = false $("canvas").remove(); } }); let canvas_enable = false ```