JS实现类似手电筒的案例

用JS实现类似手电筒的案例，需要用到canvas画布中一些奇妙的用法，所以可以先来了解一下本文中用到的点；

getContext()

canvas提供一块画布，起初是空白的，那么为了在画布上进行绘制，就需要用到getContext()方法来获取渲染上下文以及绘画功能；接收一个参数，即上下文的类型，本文中是2d绘制；

const cvs = document.getElementById('canvas');
const ctx = cvs.getContext('2d');

beginPath()

绘制一条新的路径，简单来说就是开始绘制；

clearRect()，fillRect（）

// 用来填充
//  x,y表示矩形起点的左边，width,height表示填充区域的范围
fillRect(x, y, width, height);

// 用来清空一块区域
// x,y表示矩形起点的左边，width,height表示清空区域的范围
clearRect(x, y, width, height);

createRadialGradient()

根据开始圆和结束圆创建渐变圆形渐变对象；

// 分别指定坐标和半径
createRadialGradient(x0,y0,r0,x1,y1,r1);

在创建渐变圆的过程中，需要生成的渐变对象使用addColorStop()来指定渐变色：

// 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
gradient.addColorStop(stop,color);

用到的知识点基本上了解了，那么就开始着手做这个小案例了；

效果图如下，当鼠标移动时，灯束也会跟着移动：

实现的思路也非常简单：

• 获取canvas 以及 2d绘画功能,定义变量p，用来指定渐变圆的坐标以及半径：

const p = {
  x: 150,
  y: 150,
  r: 50,
};
 const cvs = document.getElementById('canvas');
 cvs.width = document.documentElement.clientWidth;
 cvs.height = document.documentElement.clientHeight;
 const ctx = cvs.getContext('2d');

• 定义渲染函数render()：

  function render() {
  // 开始绘制
    ctx.beginPath();
    ctx.clearRect(0, 0, cvs.width, cvs.height); // 先清空整个画布
    let radial = ctx.createRadialGradient(p.x, p.y, p.r, p.x, p.y, p.r * 3); // 绘制渐变圆
    radial.addColorStop(0, 'rgba(255, 255, 255, 0)'); // 添加渐变色 0表示开始的位置
    radial.addColorStop(1, 'rgba(0, 0, 0, 0.6)'); // 1表示结束的位置
    ctx.fillStyle = radial; // 填充画布
    ctx.fillRect(0, 0, cvs.width, cvs.height);
  }

• 调用渲染函数：

  render(); // 初始化
  
  // 鼠标移动时调用
    document.onmousemove = (e) => {
    p.x = e.clientX - 275;
    p.y = e.clientY - 50;
    render();
  };

// 页面调整时调用
  window.onresize = () => {
    cvs.width = document.documentElement.clientWidth;
    cvs.height = document.documentElement.clientHeight;
    render();
  };

• 样式：

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
}

这个就是用JS实现类似手电筒的小案例，感兴趣的小伙伴可以试一试；也希望大家能多多点赞，收藏。