用html+js实现聚光灯效果【建议收藏】

最新推荐文章于 2024-02-23 16:46:50 发布

沐阳gg

最新推荐文章于 2024-02-23 16:46:50 发布

阅读量476

点赞数 2

分类专栏： html从入门到入土文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_52545155/article/details/129174906

版权

html从入门到入土专栏收录该内容

36 篇文章 10 订阅

订阅专栏

人生处处是舞台，人需要聚光灯，代码也需要聚光灯，这里就分享一个如何做聚光灯的效果，欢迎大家将代码拿去尝试；

1、效果展示

2、代码分享

<!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>
</head>
<style></style>

<body>
  <h1>hello world</h1>
</body>
<script>
  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()
  }
</script>

</html>