Canvas精灵图动画核心是切片、读帧、换帧的精准映射：需动态计算帧坐标（sx/sy/sw/sh），用drawImage九参数裁剪绘制；帧切换与渲染解耦，通过定时器控制索引更新；方向状态用命名帧组映射，提升可扩展性。
Canvas 绘制精灵图动画的核心不在“画得多快”，而在于“切得准、读得对、换得稳”。切片渲染不是简单地把一张大图按行列数硬切，而是建立图像资源、帧坐标、绘制时机三者之间的精确映射关系。
切片坐标的动态计算逻辑
精灵图（Spritesheet）的每一帧位置由行号、列号和单帧尺寸共同决定。不能写死 16×18 这类固定值，必须从加载完成后的图像真实尺寸反推：
- 先确保
this.img.width和this.img.height已就绪（即在onload回调内使用） - 单帧宽度 =
this.img.width / cols，单帧高度 =this.img.height / rows - 第
i帧的sourceX=(i % cols) * frameWidth，sourceY=Math.floor(i / cols) * frameHeight
Canvas drawImage 的四参数裁剪调用
每次绘制一帧，必须用 drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) 的完整九参数形式（或至少前五参数），其中前四个决定“从哪裁”：
-
sx/sy：裁剪起点（即该帧在精灵图中的左上角像素坐标） -
sw/sh：裁剪宽高（即上一步算出的frameWidth和frameHeight） -
dx/dy：目标画布上的绘制起点（通常是角色当前位置） -
dw/dh：绘制到画布上的缩放尺寸（通常与裁剪尺寸一致，保持原比例）
帧切换与渲染节奏解耦
动画流畅性取决于帧更新和画面刷新是否同步。常见错误是把帧索引递增和 requestAnimationFrame 混在同一循环里：
- 用独立定时器（如
setInterval或基于时间戳的 delta 判断）控制帧索引变化，避免受帧率波动影响播放速度 - 渲染函数只负责“当前帧该画在哪”，不参与帧决策；例如：
sprite.draw(ctx, sprite.currentFrameIndex) - 若需变速（如行走 vs 奔跑），只需调整帧切换间隔，无需重写绘制逻辑
方向与状态的帧索引映射管理
真实项目中，精灵图往往按方向+动作组织帧序列（如：0–3 向右走，4–7 向下走）。这时应避免用单一整数索引遍历：
- 定义命名帧组：
frames = { walkRight: [0,1,2,3], walkDown: [4,5,6,7] } - 运行时根据角色状态（
state = 'walkRight'）取对应数组，再用模运算循环索引：current = frames[state][frameIndex % frames[state].length] - 这样扩展新动作（如 idle、jump）只需增补映射，不改动底层切片和绘制代码
