Canvas光晕特效不依赖像素处理，而是通过分层绘制主光斑、晕环、星芒等光学组件，结合globalCompositeOperation='lighter'叠加与缩放重绘模拟模糊，实现高效真实的光晕效果。
Canvas 像素处理本身不直接用于生成光晕特效——光晕的核心是**亮度叠加与光学发散模拟**，靠逐像素卷积（如高斯模糊）效率低、效果差，也不符合物理逻辑。真正实用的光晕，是用 Canvas 的**绘图能力 + 合成模式 + 渐变 + 模糊技巧**组合实现的，像素操作仅在极少数定制需求中辅助微调。
光晕不是“模糊图片”，而是分层绘制光斑
真实镜头光晕由主光斑、晕环、星芒、色散条纹等组成，它们是独立的光学组件，不是原图衍生物。Canvas 中应分别绘制：
-
主光斑：用
createRadialGradient画一个中心亮、边缘透明的白色圆，半径小（如 10–25px），alpha 从 1 降到 0 -
晕环：稍大一圈的环形渐变（可用
arc+stroke，线宽 8–15px，strokeStyle 设为rgba(255,255,255,0.4)） -
星芒：用
lineTo从中心向外画 4–8 条细长白线，角度间隔 45° 或 60°，线宽 1–2px - 每层绘制前设
ctx.globalCompositeOperation = 'lighter'，让多层光斑自动叠加增亮
模糊要“假但高效”，别碰 getImageData
用像素卷积做高斯模糊来模拟光晕扩散，既慢又难控方向和衰减。更优解是：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 对预渲染好的光斑图层，用
drawImage缩放+重绘 2–3 次（例如每次缩放 1.05 倍再 drawImage 到同一位置），产生轻量级模糊感 - 或用离屏 canvas 预画好带轻微
shadowBlur的光斑（注意安卓 WebView 不稳定，慎用） - 避免在 requestAnimationFrame 里反复调用
getImageData → 卷积 → putImageData，移动端极易卡顿
动态光晕的关键：局部更新 + 硬件加速
若光晕需跟随鼠标或元素移动，整帧清空重绘会掉帧。推荐做法：
- 用两层 canvas：底层画静态内容，上层仅画光晕，且上层
canvas.style.will-change = 'transform' - 移动时不清全屏，只用
clearRect(x-60, y-60, 120, 120)清局部区域 - 光斑坐标用
requestAnimationFrame平滑插值，避免跳变
静态场景可简化：CSS 径向渐变 + blur
如果只是 banner 或封面图上的装饰性光晕，无需交互，CSS 更轻量：
- 建一个
，设border-radius: 50% - CSS 写：
background: radial-gradient(circle at center, #fff, transparent 70%); filter: blur(25px) opacity(0.7); transform: scale(1.2); - 套两层不同大小/透明度的同类 div，叠出层次感
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
