用canvas实现透明度渐变的动态雷达波纹，核心是createradialgradient创建径向渐变并逐帧更新圆心、半径及alpha衰减，通过波纹数组管理生命周期，配合requestanimationframe实现淡入淡出连续扩散效果。
用 Canvas 实现透明度渐变的动态雷达波纹，核心是用 createRadialGradient 创建径向渐变，并在每帧中动态更新圆心和半径，同时控制 alpha 通道随距离衰减。关键不在“画一圈”，而在“让一圈自己淡出、新一圈持续冒出”，形成连续扩散感。
1. 基础画布设置与波纹数据结构
先获取 canvas 上下文，设定固定尺寸（如 500×500），并准备一个波纹数组来管理多个正在扩散的环：
- 每个波纹对象包含
x、y（中心）、radius（当前半径）、maxRadius（最大扩散距离）、life（存活帧数）和maxLife（总生命周期） - 每次点击或定时触发时，向数组推入一个新波纹；渲染时遍历数组，更新 radius 和 life，移除超出生命周期的项
2. 构建带透明度衰减的径向渐变
不用纯色描边，而是用 createRadialGradient 模拟“发光边缘+自然消散”的效果：
- 起点设为波纹中心
(x, y)，内半径为radius - 2（避免实心点），外半径为radius + 2 - 添加 3 个颜色停止点：
• 在 0% 处设为 rgba(100, 180, 255, 0.8) —— 较亮的起始色
• 在 50% 处设为 rgba(100, 180, 255, 0.25)
• 在 100% 处设为 rgba(100, 180, 255, 0) —— 完全透明，实现柔和边缘 - 将该渐变赋给
ctx.fillStyle，再用ctx.fill(new Path2D(`M${x} ${y} h0.1`))或更稳妥的ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill()
3. 动态更新与逐帧渲染逻辑
使用 requestAnimationFrame 驱动动画，每帧做三件事：
-
更新：对每个波纹，增加
radius（如 +1.2）并减少life（如 −1） -
绘制：清空画布（
ctx.clearRect(0, 0, width, height)），再按数组顺序绘制所有未结束的波纹（注意：后添加的波纹在前，视觉上更“新鲜”） -
清理：过滤掉
life 或 <code>radius > maxRadius的波纹
4. 增强真实感的小技巧
原生雷达波纹不是匀速均匀的，可加入轻微扰动提升观感：
- 半径增长速率随机浮动：比如
radius += 1.0 + Math.random() * 0.5 - 渐变中心略微偏移：绘制时用
x + Math.sin(Date.now() * 0.001) * 3微调，制造电磁波动感 - 叠加多层不同衰减速度的波纹（例如主环慢+辅环快），用不同透明度/颜色区分层次
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
