当前位置：首页 > JavaScript

js实现阴影

2026-04-06 20:18:33JavaScript

使用 CSS 属性实现阴影

在 JavaScript 中可以通过直接操作元素的 style 属性来添加阴影效果。CSS 提供了 box-shadow 和 text-shadow 两种阴影属性。

// 为元素添加盒子阴影
element.style.boxShadow = '10px 10px 5px grey';

// 为文本添加阴影
element.style.textShadow = '2px 2px 4px #000000';

box-shadow 语法格式：

offset-x | offset-y | blur-radius | spread-radius | color

动态生成阴影效果

可以通过 JavaScript 动态计算阴影参数实现交互效果：

document.addEventListener('mousemove', (e) => {
    const x = e.clientX / window.innerWidth * 20;
    const y = e.clientY / window.innerHeight * 20;
    element.style.boxShadow = `${x}px ${y}px 10px rgba(0,0,0,0.5)`;
});

使用 Canvas 绘制阴影

Canvas API 提供了更灵活的阴影控制：

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

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;

ctx.fillStyle = 'blue';
ctx.fillRect(20, 20, 100, 80);

SVG 阴影效果

通过 JavaScript 操作 SVG 元素添加阴影滤镜：

const svg = document.querySelector('svg');
const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
filter.setAttribute('id', 'drop-shadow');
filter.setAttribute('height', '130%');

const feGaussianBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
feGaussianBlur.setAttribute('in', 'SourceAlpha');
feGaussianBlur.setAttribute('stdDeviation', '3');

filter.appendChild(feGaussianBlur);
svg.appendChild(filter);

const rect = document.querySelector('rect');
rect.setAttribute('filter', 'url(#drop-shadow)');