当前位置：首页 > JavaScript

js实现内发光

2026-02-02 23:19:17JavaScript

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

在JavaScript中可以通过动态修改元素的box-shadow样式属性来实现内发光效果。CSS的box-shadow属性支持inset参数用于创建内阴影效果。

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

这段代码会给ID为targetElement的元素添加红色半透明的内发光效果。参数分别表示：水平偏移(0)、垂直偏移(0)、模糊半径(10px)、扩展半径(5px)和颜色。

js实现内发光

使用Canvas绘制内发光效果

对于更复杂的内发光需求，可以使用Canvas API进行绘制：

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

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

// 创建内发光效果
ctx.shadowColor = 'rgba(0, 255, 255, 0.8)';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;

// 使用复合操作实现内阴影
ctx.globalCompositeOperation = 'source-atop';
ctx.fillRect(50, 50, 100, 100);

结合SVG滤镜创建高级内发光

通过JavaScript动态创建SVG滤镜可以实现更精细的内发光控制：

js实现内发光

const svgNS = "http://www.w3.org/2000/svg";
const filter = document.createElementNS(svgNS, "filter");
filter.setAttribute("id", "inner-glow");
filter.setAttribute("x", "-20%");
filter.setAttribute("y", "-20%");
filter.setAttribute("width", "140%");
filter.setAttribute("height", "140%");

const feOffset = document.createElementNS(svgNS, "feOffset");
feOffset.setAttribute("in", "SourceGraphic");
feOffset.setAttribute("dx", "0");
feOffset.setAttribute("dy", "0");
feOffset.setAttribute("result", "offOut");

const feGaussianBlur = document.createElementNS(svgNS, "feGaussianBlur");
feGaussianBlur.setAttribute("in", "offOut");
feGaussianBlur.setAttribute("stdDeviation", "5");
feGaussianBlur.setAttribute("result", "blurOut");

const feComposite = document.createElementNS(svgNS, "feComposite");
feComposite.setAttribute("in", "blurOut");
feComposite.setAttribute("in2", "SourceAlpha");
feComposite.setAttribute("operator", "out");
feComposite.setAttribute("result", "compOut");

filter.appendChild(feOffset);
filter.appendChild(feGaussianBlur);
filter.appendChild(feComposite);

document.getElementById('svgDefs').appendChild(filter);

使用WebGL实现3D内发光

对于需要高性能3D内发光效果的场景，可以使用WebGL：

const gl = canvas.getContext('webgl');
const program = createProgram(gl, vertexShader, fragmentShader);

// 在片段着色器中实现内发光
const fragmentShader = `
precision mediump float;
uniform vec2 resolution;
uniform float time;

void main() {
    vec2 uv = gl_FragCoord.xy / resolution;
    float dist = distance(uv, vec2(0.5));
    float glow = smoothstep(0.3, 0.0, dist);
    gl_FragColor = vec4(0.0, 0.8, 1.0, 1.0) * glow;
}
`;

响应式内发光动画

结合CSS动画和JavaScript事件监听器，可以创建响应式的内发光效果：

const glowingElement = document.querySelector('.glow-box');

window.addEventListener('mousemove', (e) => {
    const rect = glowingElement.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
    const maxDistance = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
    const intensity = 1 - (distance / maxDistance);

    glowingElement.style.boxShadow = `inset 0 0 ${intensity * 30}px rgba(0, 255, 255, ${intensity * 0.7})`;
});

这些方法提供了从简单到复杂的不同实现方案，可以根据具体需求选择合适的内发光实现方式。CSS方案适合大多数常规需求，而Canvas、SVG和WebGL方案则适用于需要更高级视觉效果的情况。

标签: js