当前位置：首页 > JavaScript

js实现内发光

2026-03-15 23:46:34JavaScript

使用CSS `box-shadow` 实现内发光

在JavaScript中动态设置CSS的box-shadow属性可以轻松实现内发光效果。box-shadow的inset参数是关键。

const element = document.getElementById('target');
element.style.boxShadow = 'inset 0 0 10px 5px rgba(255, 0, 0, 0.8)';

参数说明：

inset：表示阴影向内扩散
0 0：X/Y偏移量设为0表示均匀发光
10px：模糊半径控制发光范围
5px：扩展半径控制发光强度
rgba()：颜色和透明度设置

使用Canvas绘制内发光效果

对于需要更复杂控制的场景，可以使用Canvas API：

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

function drawInnerGlow(element, color, size) {
  const rect = element.getBoundingClientRect();
  canvas.width = rect.width;
  canvas.height = rect.height;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.globalCompositeOperation = 'destination-in';
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.globalCompositeOperation = 'source-over';
  ctx.filter = `blur(${size}px)`;
  ctx.drawImage(canvas, 0, 0);

  element.style.backgroundImage = `url(${canvas.toDataURL()})`;
}

SVG滤镜实现方案

通过动态创建SVG滤镜可以实现高质量的内发光：

function createSvgGlow(element, color, blur) {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
  filter.id = "inner-glow";

  const flood = document.createElementNS("http://www.w3.org/2000/svg", "feFlood");
  flood.setAttribute("flood-color", color);

  const composite = document.createElementNS("http://www.w3.org/2000/svg", "feComposite");
  composite.setAttribute("in2", "SourceAlpha");
  composite.setAttribute("operator", "in");

  const blurFilter = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");
  blurFilter.setAttribute("stdDeviation", blur);

  filter.appendChild(flood);
  filter.appendChild(composite);
  filter.appendChild(blurFilter);
  svg.appendChild(filter);

  document.body.appendChild(svg);

  element.style.filter = "url(#inner-glow)";
}

使用WebGL实现高级发光

对于需要高性能或复杂效果的场景：

const gl = canvas.getContext('webgl');
const program = createProgram(gl, vsSource, fsSource);

function renderInnerGlow() {
  gl.useProgram(program);
  gl.uniform2f(resolutionUniform, canvas.width, canvas.height);
  gl.uniform4f(glowColorUniform, 1.0, 0.0, 0.0, 0.5);
  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

// 顶点和片段着色器需要包含发光算法

响应式内发光实现

结合ResizeObserver实现响应式调整：

js实现内发光

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const { width, height } = entry.contentRect;
    const glowSize = Math.min(width, height) * 0.1;
    entry.target.style.boxShadow = `inset 0 0 ${glowSize}px rgba(255,255,255,0.7)`;
  });
});

observer.observe(document.getElementById('target'));

每种方法适用于不同场景：CSS方案最简单，Canvas/SVG适合复杂图形，WebGL适合高性能需求。可以根据项目需求选择合适的技术方案。

标签: js