Canvas图像平滑切换需用requestAnimationFrame逐帧更新globalAlpha实现渐变，避免setTimeout/setInterval；双图层叠加时A淡出（globalAlpha=1−t）、B淡入（globalAlpha=t），t线性推进，定位与尺寸须一致；Alpha保留两位小数即可兼顾精度与性能。
Canvas中实现图像平滑切换，核心不是靠Alpha通道“控制”本身，而是利用globalAlpha或rgba()配合定时更新，模拟透明度渐变过程。Alpha只是中间工具，关键在帧间插值与渲染节奏。
用requestAnimationFrame驱动渐变动画
避免使用setTimeout或setInterval，它们时间不精准，易导致闪烁或卡顿。应以requestAnimationFrame为节拍器，逐帧更新透明度值：
- 定义起始Alpha（如0）、目标Alpha（如1）、总帧数（如60）
- 每帧按比例递增当前Alpha：
currentAlpha = startAlpha + (targetAlpha - startAlpha) * (frameCount / totalFrames) - 清空画布、设置
ctx.globalAlpha = currentAlpha、绘制图像
两张图交叉淡入淡出的典型流程
切换图像A→B时，不能直接替换，需让A渐隐、B渐显。推荐双图层叠加策略：
- 先绘制图像A，设
globalAlpha = 1 - t（t从0到1） - 再绘制图像B，设
globalAlpha = t - t由动画帧线性推进，视觉上即A淡出+B淡入，无空白间隙
- 注意：两张图需完全重叠定位，用
drawImage(img, x, y, width, height)确保尺寸一致
Alpha精度与性能兼顾技巧
Canvas的Alpha计算是浮点运算，但人眼对0.01以下变化不敏感。可做轻量优化：
立即学习“前端免费学习笔记（深入）”；
- Alpha值保留两位小数即可，避免无意义的高精度计算
- 当
Math.abs(currentAlpha - targetAlpha) 时，直接跳到目标值并终止动画 - 若图像较大，可在淡入淡出阶段关闭抗锯齿（
ctx.imageSmoothingEnabled = false），减少GPU开销
避免Alpha残留影响后续绘制
globalAlpha是上下文状态，会影响之后所有绘图操作。务必在每次动画帧末尾重置：
- 绘制完过渡图像后，立即执行
ctx.globalAlpha = 1.0 - 更稳妥做法：用
ctx.save()和ctx.restore()包裹Alpha相关操作 - 切勿在循环外长期设置低Alpha值，否则文字、线条等后续内容都会变淡
不复杂但容易忽略。真正决定平滑感的，是帧率稳定性与Alpha步进的均匀性，而不是Alpha本身有多“高级”。
