在html5中，我们可以利用canvas提供的绘图上下文属性来模拟霓虹灯效果。所谓霓虹灯效，本质上是带有外发光、颜色鲜艳且会闪烁或渐变的视觉表现。通过合理组合shadowBlur、shadowColor以及requestAnimationFrame，就能用纯js写出轻量的霓虹滤镜。
一、准备html结构
首先需要一个canvas元素作为绘制容器，并通过css做一点暗色背景来突出霓虹感。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>霓虹灯效</title>
<style>
body { background: #000; margin: 0; }
canvas { display: block; margin: 40px auto; }
</style>
</head>
<body>
<canvas id="neon" width="600" height="200"></canvas>
<script src="neon.js"></script>
</body>
</html>
二、js实现霓虹滤镜的核心写法
在js中，我们获取canvas上下文，设置线条或文字的shadow属性来产生光晕，这就是html5霓虹滤镜js写法的关键。
1. 基础绘制函数
下面代码展示如何绘制一段带霓虹效果的文字：
// 获取画布与上下文
const canvas = document.getElementById('neon');
const ctx = canvas.getContext('2d');
// 绘制霓虹文字
function drawNeon(text, color) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = 'bold 60px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 核心滤镜属性
ctx.shadowBlur = 20;
ctx.shadowColor = color;
ctx.fillStyle = '#fff';
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
// 叠加一层彩色描边增强霓虹感
ctx.lineWidth = 2;
ctx.strokeStyle = color;
ctx.strokeText(text, canvas.width / 2, canvas.height / 2);
}
2. 让霓虹灯闪烁起来
使用requestAnimationFrame动态改变颜色与模糊值，模拟霓虹灯波动：
const colors = ['#ff00ff', '#00ffff', '#ffff00'];
let frame = 0;
function loop() {
const c = colors[frame % colors.length];
const blur = 15 + Math.sin(frame * 0.1) * 10;
ctx.shadowBlur = blur;
drawNeon('NEON', c);
frame++;
requestAnimationFrame(loop);
}
loop();
三、用滤镜做边框霓虹效
除了文字，也可以用strokeRect配合shadow实现矩形霓虹边框。注意这里用到的<canvas>标签是html元素，而在js里调用的是上下文方法而非标签。
function drawNeonRect(color) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowBlur = 25;
ctx.shadowColor = color;
ctx.strokeStyle = color;
ctx.lineWidth = 4;
ctx.strokeRect(50, 50, 500, 100);
}
四、小结
html5滤镜实现霓虹灯效并不依赖复杂库，掌握canvas的shadowBlur与shadowColor即可。将上述js写法组合进动画循环，就能获得流畅的霓虹滤镜效果。实际项目中可封装成复用函数，便于控制颜色与频率。