移动端H5全屏抽奖大转盘的“彩色光芒旋转动画”需用Canvas（推荐）或SVG+CSS混合实现：Canvas通过requestAnimationFrame动态绘制渐变射线与光晕提升性能；SVG方案用CSS旋转组并启用GPU加速；光芒层须独立于抽奖逻辑分层管理，并为低端设备提供降级策略。
移动端 H5 全屏抽奖大转盘的“彩色光芒旋转动画”，本质是围绕转盘中心向外发散、动态旋转的光效，不是单纯用 CSS 动画旋转一张图片。要真实、流畅、高性能，需结合 Canvas 或 SVG + CSS 混合实现，避免纯 CSS 多层 radial-gradient 旋转导致卡顿或失真。
用 Canvas 绘制动态放射光效（推荐）
Canvas 控制力强、性能好，适合做持续旋转的发光射线或渐变光晕：
- 在 canvas 上以圆心为起点，每帧绘制多条带透明度/色相变化的线段（如 36 条射线），每次 rotate 渐进角度（如 0.5°），形成顺滑旋转感
- 叠加一层半径缓慢扩大的 radialGradient（中心亮白→透明），模拟“光晕呼吸”；再叠加一层带 noise 纹理的模糊光斑（可用离屏 canvas 预渲染），增强质感
- 用 requestAnimationFrame 驱动，控制 FPS 在 60，旋转角度用时间戳计算（非 setInterval），确保不同设备节奏一致
- 注意适配全屏：监听 resize 和 orientationchange，重设 canvas.width/height = window.innerWidth/window.innerHeight，并重绘
用 SVG + CSS 实现轻量光效（适合简单需求）
若只需基础旋转光束，SVG 更易维护且支持 CSS 变量控制：
- 用 绘制 8–12 根
（从中心出发，长度略超转盘半径），每根设置不同 hue（hsl(0,100%,70%) → hsl(300,100%,70%)） - 将所有
包在 内，用 CSS 对该 设置 animation: spin 8s linear infinite - 关键细节：开启 will-change: transform + transform-style: preserve-3d 提升 GPU 加速；iOS Safari 需加 -webkit-transform 前缀
- 避免直接旋转整个 SVG 容器（易拉伸变形），只旋转内部
组
与转盘逻辑解耦，分层管理
光芒动画必须独立于抽奖逻辑（如指针停转、中奖高亮），否则一卡全卡：
- 把光芒层（canvas 或 svg）放在最上层，z-index > 转盘层 > 背景层；用 pointer-events: none 确保不拦截点击
- 抽奖开始时，仅暂停/重置光芒的旋转速率（如加速到 2×），中奖瞬间触发一次短脉冲（scale(1.2) + opacity 变化），结束后恢复常速
- 避免在 drawFrame 中执行 DOM 查询或复杂计算；所有颜色、角度、尺寸预存为变量
性能与兼容性兜底
低端安卓机或微信 X5 内核易掉帧，需主动降级：
- 检测 window.devicePixelRatio 或 UA 含 “MQQBrowser” 时，减少射线数量（从 36→12）、关闭光晕模糊、改用纯色 radialGradient
- 提供开关：用户可手动关闭光效（localStorage 记录偏好），按钮文案写“省电模式”更友好
- 全屏前调用 document.documentElement.requestFullscreen()，并监听 fullscreenchange，确保光芒 canvas 自动重绘适配
