当前位置：首页 > JavaScript

js实现内发光

2026-04-07 17:09:07JavaScript

在JavaScript中实现内发光效果通常可以通过CSS的box-shadow或filter: drop-shadow()结合Canvas或SVG来实现。以下是几种常见的方法：

使用CSS box-shadow实现内发光

CSS的box-shadow属性可以通过inset参数实现内发光效果。以下是一个示例代码：

<div class="glow-effect"></div>

<style>
.glow-effect {
  width: 200px;
  height: 200px;
  background-color: #333;
  box-shadow: inset 0 0 20px 10px rgba(255, 0, 0, 0.7);
}
</style>

inset：表示阴影向内投射。
0 0：阴影的水平和垂直偏移（内发光通常不需要偏移）。
20px：模糊半径，控制发光的扩散程度。
10px：扩展半径，控制发光的范围。
rgba(255, 0, 0, 0.7)：发光颜色和透明度。

使用Canvas实现动态内发光

如果需要动态控制内发光效果，可以使用Canvas绘制：

<canvas id="glowCanvas" width="300" height="300"></canvas>

<script>
const canvas = document.getElementById('glowCanvas');
const ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillStyle = '#333';
ctx.fillRect(50, 50, 200, 200);

// 使用阴影模糊实现内发光
ctx.shadowColor = 'rgba(255, 0, 0, 0.7)';
ctx.shadowBlur = 20;
ctx.fillStyle = 'transparent';
ctx.fillRect(50, 50, 200, 200);
</script>

使用SVG实现内发光

SVG的feGaussianBlur和feComposite滤镜可以实现内发光效果：

<svg width="300" height="300">
  <defs>
    <filter id="innerGlow">
      <feGaussianBlur stdDeviation="5" result="blur"/>
      <feComposite operator="in" in="blur" in2="SourceGraphic"/>
    </filter>
  </defs>
  <rect x="50" y="50" width="200" height="200" fill="#333" filter="url(#innerGlow)"/>
</svg>

feGaussianBlur：定义模糊效果。
feComposite：通过operator="in"将模糊限制在图形内部。

使用JavaScript动态调整CSS内发光

通过JavaScript动态修改CSS属性，实现交互式内发光：

<div id="dynamicGlow" class="glow-effect"></div>

<script>
const glowElement = document.getElementById('dynamicGlow');

// 动态调整发光颜色和大小
function updateGlow(color, blur, spread) {
  glowElement.style.boxShadow = `inset 0 0 ${blur}px ${spread}px ${color}`;
}

// 示例：红色内发光，模糊20px，扩展10px
updateGlow('rgba(255, 0, 0, 0.7)', 20, 10);
</script>

结合CSS变量实现灵活控制

通过CSS变量和JavaScript结合，可以更灵活地控制内发光效果：

js实现内发光

<div class="glow-effect" style="--glow-color: rgba(255, 0, 0, 0.7);"></div>

<style>
.glow-effect {
  width: 200px;
  height: 200px;
  background-color: #333;
  box-shadow: inset 0 0 20px 10px var(--glow-color);
}
</style>

<script>
document.querySelector('.glow-effect').style.setProperty('--glow-color', 'rgba(0, 255, 0, 0.7)');
</script>