JS做出发光效果的方法主要包括：使用CSS的box-shadow属性、利用Canvas绘图、结合SVG滤镜。 在实际应用中，最常用且便捷的方式是通过CSS来实现发光效果，下面将详细描述这种方法。
一、使用CSS的box-shadow属性
1. 基本概念
CSS的box-shadow属性用于为元素添加阴影，通过调整阴影的颜色、模糊半径和扩展半径，可以轻松实现发光效果。这种方法简单高效，适用于大多数情况。
2. 实现步骤
a. 基本语法
element {
box-shadow: h-shadow v-shadow blur spread color;
}
h-shadow：水平阴影的位置，可以是负值。v-shadow：垂直阴影的位置，可以是负值。blur：模糊距离。spread：阴影的扩展距离。color：阴影的颜色。
b. 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发光效果</title>
<style>
.glow {
width: 200px;
height: 200px;
background-color: #333;
box-shadow: 0 0 20px 10px rgba(0, 255, 0, 0.7); /* 绿色发光 */
}
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>
在这个例子中，box-shadow属性为一个div元素添加了绿色的发光效果。
3. 高级应用
a. 多重发光
可以叠加多个box-shadow来实现更复杂的发光效果。
element {
box-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.7), 0 0 30px rgba(0, 0, 255, 0.7);
}
b. 动画效果
结合CSS动画，可以实现动态发光效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发光动画效果</title>
<style>
@keyframes glow {
0% {
box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff, 0 0 20px #ff00ff;
}
50% {
box-shadow: 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff;
}
100% {
box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff, 0 0 20px #ff00ff;
}
}
.glow {
width: 200px;
height: 200px;
background-color: #333;
animation: glow 2s infinite;
}
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>
这个例子中，通过@keyframes定义动画，使元素持续发光。
二、利用Canvas绘图
1. 基本概念
Canvas是HTML5提供的一个用于绘图的元素，可以通过JavaScript绘制复杂的图形和动画，适合需要更多控制和复杂效果的场景。
2. 实现步骤
a. 基本语法
使用<canvas>元素，并通过JavaScript的CanvasRenderingContext2D接口进行绘图。
b. 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 发光效果</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'black';
context.fillRect(0, 0, canvas.width, canvas.height);
context.shadowColor = 'rgba(0, 255, 0, 0.7)';
context.shadowBlur = 20;
context.fillStyle = 'green';
context.fillRect(100, 100, 200, 200);
</script>
</body>
</html>
在这个示例中，context.shadowColor和context.shadowBlur用于设置阴影颜色和模糊度，从而实现发光效果。
3. 高级应用
a. 渐变发光
可以结合createRadialGradient方法实现渐变的发光效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 渐变发光效果</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'black';
context.fillRect(0, 0, canvas.width, canvas.height);
var gradient = context.createRadialGradient(200, 200, 20, 200, 200, 100);
gradient.addColorStop(0, 'rgba(0, 255, 0, 1)');
gradient.addColorStop(1, 'rgba(0, 255, 0, 0)');
context.fillStyle = gradient;
context.fillRect(100, 100, 200, 200);
</script>
</body>
</html>
这种方法使用了径向渐变，实现了更自然的发光效果。
三、结合SVG滤镜
1. 基本概念
SVG滤镜提供了更加灵活的图像处理功能，可以通过滤镜实现发光效果。适用于需要高质量和复杂效果的场景。
2. 实现步骤
a. 基本语法
使用<filter>元素定义滤镜，并通过feGaussianBlur和feMerge实现发光效果。
b. 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG 发光效果</title>
<style>
.glow {
filter: url(#glow);
}
</style>
</head>
<body>
<svg width="400" height="400">
<defs>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="10" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect x="100" y="100" width="200" height="200" fill="green" class="glow"/>
</svg>
</body>
</html>
在这个示例中，使用了SVG滤镜实现发光效果，其中feGaussianBlur用于模糊处理，feMerge用于合并滤镜效果和原始图形。
3. 高级应用
a. 动态滤镜
可以结合JavaScript动态修改SVG滤镜，实现动态发光效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG 动态发光效果</title>
<style>
.glow {
filter: url(#glow);
}
</style>
</head>
<body>
<svg width="400" height="400">
<defs>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="10" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect id="rect" x="100" y="100" width="200" height="200" fill="green" class="glow"/>
</svg>
<script>
let rect = document.getElementById('rect');
let glowFilter = document.getElementById('glow').firstElementChild;
function animate() {
let stdDeviation = 10 + 10 * Math.sin(Date.now() / 500);
glowFilter.setAttribute('stdDeviation', stdDeviation);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
在这个示例中，通过JavaScript动态修改stdDeviation属性，实现了动态发光效果。
四、总结
通过以上方法，可以在不同场景下实现元素的发光效果。使用CSS的box-shadow属性是最简单和常用的方式，适用于大多数情况；利用Canvas绘图提供了更多控制和复杂效果的可能性；结合SVG滤镜则适用于高质量和复杂的图像处理需求。根据具体需求选择合适的方法，可以实现最佳的视觉效果。
相关问答FAQs：
1. 怎么给文字添加发光效果？
你可以使用CSS的text-shadow属性来给文字添加发光效果。通过设置合适的颜色和模糊半径，可以实现不同的发光效果。
2. 怎么给图片添加发光效果？
你可以使用CSS的box-shadow属性来给图片添加发光效果。通过设置合适的颜色和模糊半径，可以实现图片发光的效果。
3. 怎么给按钮添加发光效果？
你可以使用CSS的box-shadow属性来给按钮添加发光效果。通过设置合适的颜色和模糊半径，可以实现按钮发光的效果。同时，你还可以使用JavaScript来添加鼠标悬停效果，让按钮在鼠标悬停时发光。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3842676
