canvas能量光束特效核心是用'lighter'模式分层叠加模拟光学过曝：主光束用径向渐变填充锥形，冲击时叠加白点、晕环、星芒；辅以拖尾残影和lighter粒子溅射，并通过双canvas与局部重绘保障性能。
用 Canvas 制作能量光束冲击特效，关键不在“画一根线”，而在于模拟光的物理特性：高亮中心、边缘辉光、动态拖尾、通道叠加过曝。核心是 globalCompositeOperation = 'lighter' 模式配合分层绘制与局部重绘。
光束主体：带渐变的高强度光柱
不要用单色 strokeLine —— 那只是普通线条。真正有能量感的光束需要径向亮度衰减：
- 用
createRadialGradient(x1, y1, r1, x2, y2, r2)创建从发射点向外扩散的白色→透明渐变 - 填充一个细长矩形（或用
arc+lineTo构成锥形），宽度随距离缓慢收窄，模拟光束发散 - 主光束不加模糊，但 alpha 控制在 0.6–0.9，为后续 lighter 叠加留出余量
冲击爆发：lighter 模式下的多层叠加
当光束击中目标时，需触发一次“光学过载”效果，这时必须切换到 lighter 模式：
- 先调用
ctx.globalCompositeOperation = 'lighter'（设一次即可，无需每帧重设） - 在同一位置快速绘制三层：① 小尺寸纯白圆点（直径12–20px）；② 中号晕环（直径60–100px，rgba(255,255,255,0.4)）；③ 若干短星芒线（长度40–80px，角度间隔30°，alpha 0.3）
- 所有层都用 lighter 绘制，像素值逐通道相加 → 自然产生刺眼白点+柔化光晕+放射星芒
动态反馈：拖尾+粒子溅射
真实能量冲击会伴随残余能量逸散和材质反冲：
- 拖尾：用 canvas 本地坐标系平移+缩放，将上一帧光束末端区域缩小 90% 后 drawImage 到当前帧（模拟运动残影），再叠加新光束
- 粒子溅射：在冲击点生成 8–15 个微小粒子，每个粒子带初速度（朝外辐射）、轻微旋转、生命周期（300–600ms）、颜色从黄白渐变为橙红
- 所有粒子使用 lighter 模式绘制，确保与主光束融合而非遮挡
性能与真实感兼顾
高频冲击不能全屏重绘，否则移动端直接卡顿：
- 用两层 canvas：底层固定场景，上层仅承载光束与冲击特效，并设置
style.will-change = 'transform' - 每次冲击只 clearRect 冲击点周边 150×150px 区域，再重绘该范围内的全部光束组件
- 避免在动画循环里反复 setAttribute 或 resize canvas；尺寸变化统一用 CSS transform 缩放 canvas 元素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
