用HTML5 Canvas可实现雷达扫描特效，核心是绘制旋转扇形光束并结合遮罩或透明度变化实现“扫过才可见”效果，关键在于坐标变换、弧度计算和requestAnimationFrame控制动画节奏。
用 HTML5 Canvas 实现雷达扫描的动态搜寻特效，核心是绘制一个圆形扫描区域 + 一条旋转的扫描线（扇形光束），再配合渐变透明度或遮罩实现“扫过才可见”的视觉效果。关键不在于复杂动画，而在于坐标变换、弧度计算和 requestAnimationFrame 的合理使用。
1. 基础结构：画布与中心点定位
先设置 canvas 并获取上下文，明确雷达中心坐标（通常为画布正中心）：
<canvas id="radar" width="400" height="400"></canvas>
JavaScript 中：
立即学习“前端免费学习笔记（深入）”；
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
const canvas = document.getElementById('radar');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(centerX, centerY) * 0.9; // 留边2. 绘制静态雷达背景（可选但增强真实感）
包括同心圆（距离刻度）、角度线（方位刻度）和中心十字：
- 用 ctx.arc() 画 3–4 个等距同心圆
- 用 ctx.moveTo() + ctx.lineTo() 每 30° 画一条射线（共 12 条）
- 在中心加小圆点或十字标记
3. 实现旋转扫描线（核心动画）
扫描线本质是一条从中心出发、长度等于半径、角度随时间递增的线段；更真实的效果是带一定夹角的扇形光束（如 ±5°）：
- 定义当前扫描角度 angle（单位：弧度），初始为 0
- 每帧用 angle += 0.02（控制转速），超过 2π 后重置为 0
- 用 ctx.beginPath() → moveTo(centerX, centerY) → lineTo(x, y) 画线；或用 ctx.arc() 绘制扇形（起始角 = angle−0.087，结束角 = angle+0.087）
- 给扫描线填充亮绿色（#0f0）并加轻微阴影（ctx.shadowColor / shadowBlur）提升立体感
4. 添加“扫描揭示”效果（关键视觉逻辑）
真正体现“搜寻感”的不是线本身，而是它扫过时才让目标显现。常用两种方式：
- 遮罩法（推荐）：用 ctx.globalCompositeOperation = 'destination-in'，先画扫描扇形作为遮罩，再画目标图层（如点阵、图标），只有扇形覆盖区域可见
- 渐隐法：目标元素预设低透明度（ctx.globalAlpha = 0.2），扫描线经过时，在扇形范围内临时提高 alpha（需逐像素判断或区域重绘，开销略大）
- 简单替代：只在扫描线扫过的角度范围内，动态绘制目标点（比如每帧检查点的角度是否落在当前扇形内）
记得用 requestAnimationFrame 驱动循环，清空画布前保留背景（只清除扫描线部分或用双缓冲避免闪烁）。不需要第三方库，纯 Canvas API 即可完成——重点是理清“背景静止、光束旋转、内容按需显示”三层关系。
