手电筒效果 – 有爱前端

https://juejin.cn/post/7231015741453303845

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手电筒效果</title> <style> body, html { margin: 0; padding: 0; } .flashlight { position: relative; height: 100vh; } .item { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: crosshair; background: radial-gradient( circle 100px at 180px 110px, rgba(0,0,0,0), rgba(0,0,0,.8)); z-index: 9; } img { width: 100%; display:block; height: 100%; } </style> </head> <body> <div class="flashlight"> <div class="item"></div> <img src="https://momen.vip/static/img/wallhaven-85pxro.jpg" alt=""> </div> </body> <script> const item = document.querySelector('.item'); item.addEventListener('mousemove',(e)=>{ const { offsetX, offsetY, pageX, pageY } = e; let x = offsetX; let y = offsetY; // black item.style.background = `radial-gradient( circle 100px at ${x}px ${y}px, rgba(0,0,0,0), rgba(0,0,0,.8))` }) </script> </html>

提示：你可以先修改部分代码再运行。

https://blog.csdn.net/qq_56402474/article/details/132888664

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态手电筒</title> <style> * { margin: 0; padding: 0; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background: url(https://pic2.zhimg.com/v2-4d0f3e43e75bb67646215e259fc2e9ad_r.jpg) no-repeat; background-size: cover; background-position: center; } canvas { position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none; } </style> </head> <body> <canvas></canvas> <script> const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); const position = { x: 0, y: 0, r: 50 } function render() { canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight; ctx.beginPath(); ctx.clearRect(0, 0, canvas.width, canvas.height) var radial = ctx.createRadialGradient(position.x, position.y, position.r, position.x, position.y, position.r * 3) radial.addColorStop(0, 'rgba(255,255,255,0)'); radial.addColorStop(1, 'rgba(0,0,0,0.9)'); ctx.fillStyle = radial; ctx.fillRect(0, 0, canvas.width, canvas.height); } function init() { canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight; ctx.beginPath(); ctx.clearRect(0, 0, canvas.width, canvas.height) var radial = ctx.createRadialGradient(position.x, position.y, position.r, position.x, position.y, position.r * 3) radial.addColorStop(1, 'rgba(0,0,0,0.9)'); ctx.fillStyle = radial; ctx.fillRect(0, 0, canvas.width, canvas.height); } document.onmousemove = e => { position.x = e.clientX; position.y = e.clientY; render(); } window.onload = function () { init() } </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 手电筒效果