canvas动态发光按钮的核心是通过阴影api、多层绘制和透明度变化模拟视觉状态与发光反馈，而非依赖css；需设置canvas上下文、启用shadowcolor/shadowblur、结合hover/click事件动态调节参数实现呼吸式光晕与脉冲效果。
用 Canvas 绘制动态发光按钮，核心不是“画一个按钮”，而是“在画布上模拟出按钮的视觉状态 + 发光反馈”。它不依赖 CSS 的 box-shadow 或 text-shadow，而是通过 Canvas 的阴影 API、多层绘制和透明度变化来实现可控、可编程的发光效果。
准备画布与基础上下文
先声明一个 <canvas></canvas> 元素，并获取 2D 上下文。建议设为固定尺寸（如 200×60），便于后续坐标计算；若需响应式，可在初始化后监听 resize 并重设 canvas.width/height：
- HTML 中写：
<canvas id="glowBtn" width="200" height="60"></canvas> - JS 中获取：
const canvas = document.getElementById('glowBtn'); const ctx = canvas.getContext('2d'); - 确保 canvas 在页面中可见，CSS 可加
background: #111衬托发光效果
实现发光效果的关键三步
Canvas 没有“自动发光”属性，但可通过组合以下操作模拟真实光晕：
-
启用阴影：设置
ctx.shadowColor（如'hsl(200, 100%, 60%)'）、ctx.shadowBlur（值越大越扩散，常用 20–60）、ctx.shadowOffsetX/Y（通常设为 0，保持居中光晕） - 多层描边/填充：先用较大 blur 绘一次（主光晕），再用较小 blur 或无 blur 绘一次（实色主体），形成内外层次
-
动态调节透明度或色相：在动画循环中，用
requestAnimationFrame改变shadowColor的亮度（L 值）或透明度（通过 rgba 颜色），让光晕呼吸式明暗变化
添加交互反馈（悬停/点击）
发光按钮必须响应用户操作，否则只是静态图。不需要 DOM 事件直接改样式，而是用 Canvas 重绘逻辑：
- 监听
canvas.addEventListener('mouseenter')和'mouseleave'，切换一个状态标志（如isHovered = true） - 在动画函数中，根据
isHovered调整shadowBlur（悬停时加大到 50）、shadowColor（更亮或偏蓝）、甚至文字粗细或缩放（用ctx.scale()微调） - 点击可叠加短时脉冲：触发
isPulsing = true，并在接下来 30 帧内让 blur 和 opacity 快速增大再衰减
完整动画循环示例（精简版）
以下代码片段可直接嵌入 JS，配合上述 HTML 使用：
let isHovered = false;
let pulse = 0;
<p>function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);</p><p>// 动态颜色：HSL 色相缓慢旋转，亮度随悬停增强
const hue = (Date.now() <em> 0.1) % 360;
const light = isHovered ? 75 : 55 + 10 </em> Math.sin(Date.now() * 0.002);
ctx.shadowColor = <code>hsla(${hue}, 90%, ${light}%, 0.8)</code>;</p><p>// 发光强度：悬停+脉冲叠加
ctx.shadowBlur = 30 + (isHovered ? 20 : 0) + pulse;</p><p>// 绘制圆角矩形按钮体
ctx.fillStyle = '#fff';
ctx.fillRect(20, 10, 160, 40);</p><p>// 绘制文字（居中）
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 16px sans-serif';
ctx.fillStyle = '#000';
ctx.fillText('CLICK ME', 100, 30);</p><p>// 脉冲衰减
if (pulse > 0) pulse *= 0.92;</p><p>requestAnimationFrame(animate);
}
animate();</p><p>canvas.addEventListener('mouseenter', () => isHovered = true);
canvas.addEventListener('mouseleave', () => isHovered = false);
canvas.addEventListener('click', () => pulse = 40); // 点击触发强光脉冲
</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
