HTML5 Canvas 无法原生支持 GIF 逐帧播放，需用 JavaScript 解析二进制数据（如 gifuct-js），提取帧、延时等信息，手动处理帧叠加并用 requestAnimationFrame 控制绘制节奏。
HTML5 Canvas 本身不支持直接加载或解析 GIF 动画，也无法原生控制其逐帧播放。要实现“GIF 逐帧解析 + 网页可控播放”，必须借助 JavaScript 解析 GIF 文件的帧数据（如使用第三方解析库），再将每一帧绘制到 Canvas 上，由 JS 控制时序与交互逻辑。
核心思路：绕过浏览器自动解码，手动解析 GIF 帧
浏览器 img 标签加载 GIF 会自动解码并循环播放，失去帧级控制权。真正可控的方式是：
- 用 File API 或 fetch 获取 GIF 的二进制数据（ArrayBuffer）
- 使用轻量解析库（如 gif.js、jsgif 或更现代的 gifuct-js）提取帧图像、延时、处置方法等元信息
- 将每帧解码为 ImageData 或临时
<img>，再用ctx.putImageData()或ctx.drawImage()绘制到 Canvas - 用
requestAnimationFrame或setTimeout模拟播放节奏，并响应暂停、跳帧、变速等操作
推荐工具：使用 gifuct-js 实现可靠帧提取
gifuct-js 是目前维护活跃、API 清晰、支持 ES Module 的 GIF 解析库，适合现代项目。基本流程如下：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 安装：
npm install gifuct-js或通过 CDN 引入 - 解析 GIF 字节流：
GIF.decode(arrayBuffer)返回包含frames数组的对象 - 每帧含
data（Uint8ClampedArray 格式的 RGBA 像素）、dims（宽高）、delay（毫秒）、disposalType（帧叠加方式）等关键字段 - 注意：需手动处理帧叠加逻辑（如 restore previous、keep current），否则透明帧会显示异常
Canvas 绘制与播放控制实现要点
逐帧绘制不是简单循环 drawImage，需考虑：
立即学习“前端免费学习笔记（深入）”；
-
帧叠加（Disposal Method）：GIF 中第2帧常为差异帧（仅更新部分像素）。根据
disposalType决定是否清除上一帧背景或保留前帧内容 -
时间精度控制：用
requestAnimationFrame驱动主循环，结合帧 delay 和起始时间戳计算当前应显示哪一帧，避免 setTimeout 累积误差 -
交互响应：暴露
play()、pause()、gotoFrame(n)、setSpeed(rate)等方法，内部维护播放状态（isPlaying、currentFrameIndex、startTime、playRate） -
内存优化：大 GIF 帧多时，可只缓存当前帧+下一帧的 ImageData，或预生成
ImageBitmap提升绘制性能
简易代码结构示意（无依赖版逻辑骨架）
以下为关键逻辑缩略，不含完整错误处理和帧叠加细节：
let frames = [];
let currentFrame = 0;
let isPlaying = false;
let startTime = 0;
let playRate = 1;
<p>async function loadGIF(url) {
const res = await fetch(url);
const arrayBuffer = await res.arrayBuffer();
const gif = GIF.decode(arrayBuffer);
frames = gif.frames.map(f => ({
imageData: new ImageData(new Uint8ClampedArray(f.data), f.dims.width, f.dims.height),
delay: f.delay * 10 // 转为毫秒
}));
}</p><p>function renderFrame(index) {
const frame = frames[index];
const ctx = canvas.getContext('2d');
ctx.putImageData(frame.imageData, 0, 0);
}</p><p>function animate(timestamp) {
if (!isPlaying) return;
if (!startTime) startTime = timestamp;</p><p>const elapsed = (timestamp - startTime) * playRate;
let targetFrame = 0;
let accumulated = 0;
for (let i = 0; i < frames.length; i++) {
if (elapsed < accumulated + frames[i].delay) {
targetFrame = i;
break;
}
accumulated += frames[i].delay;
}</p><p>if (currentFrame !== targetFrame) {
currentFrame = targetFrame;
renderFrame(currentFrame);
}
requestAnimationFrame(animate);
}
