# Spotlight

**Repository Path**: JustTwo/Spotlight

## Basic Information

- **Project Name**: Spotlight
- **Description**: CANVAS聚光灯效果
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-06-19
- **Last Updated**: 2022-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Spotlight

#### 介绍

CANVAS 聚光灯效果

## js 代码

```js
function onMove(e) {
  var mouse = { x: 0, y: 0 };
  var x, y;
  var e = e || window.event;
  if (e.layerX || e.layerY) {
    x = e.layerX;
    y = e.layerY;
  } else {
    x =
      e.clientX + document.body.scrollLeft ||
      document.documentElement.scrollLeft;
    y =
      e.clientY + document.body.scrollTop || document.documentElement.scrollTop;
  }
  mouse.x = x;
  mouse.y = y;

  var cnv = document.getElementById("ctx");
  ctx = cnv.getContext("2d");
  ctx.clearRect(0, 0, 1920, 1080);
  var img = new Image();
  img.src = "./person.png";
  ctx.drawImage(img, 0, 0);
  ctx.beginPath();
  ctx.arc(mouse.x, mouse.y, 1920 * 2, 0, Math.PI * 2, true);
  ctx.closePath();
  var gnt = ctx.createRadialGradient(
    mouse.x,
    mouse.y,
    50,
    mouse.x,
    mouse.y,
    500
  );
  gnt.addColorStop(0, "rgba(0,0,0,0)");
  gnt.addColorStop(0.5, "rgba(0,0,0,0.25)");
  gnt.addColorStop(1, "rgba(0,0,0,5)");
  ctx.fillStyle = gnt;
  ctx.fill();
}
```
## 效果图
![输入图片说明](https://images.gitee.com/uploads/images/2021/0329/142135_066ccbf7_5087352.png "spotlight.png")