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本身有多“高级”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！