在 HTML5 中，如何在画布中轻松绘制（请不要太多复杂的代码）动画 GIF（使用 drawImage 仅在画布中显示第一帧）
如果 gif 文件的自动画布动画不可用，您可以尝试使用 sprite-sheets，但这确实需要更多代码。
var img_obj = {
'source': null,
'current': 0,
'total_frames': 16,
'width': 16,
'height': 16
};
var img = new Image();
img.onload = function () { // Triggered when image has finished loading.
img_obj.source = img; // we set the image source for our object.
}
img.src = 'img/filename.png'; // contains an image of size 256x16
// with 16 frames of size 16x16
function draw_anim(context, x, y, iobj) { // context is the canvas 2d context.
if (iobj.source != null)
context.drawImage(iobj.source, iobj.current * iobj.width, 0,
iobj.width, iobj.height,
x, y, iobj.width, iobj.height);
iobj.current = (iobj.current + 1) % iobj.total_frames;
// incrementing the current frame and assuring animation loop
}
function on_body_load() { // <body onload='on_body_load()'>...
var canvas = document.getElementById('canvasElement');
// <canvas id='canvasElement' width='320' height='200'/>
var context = canvas.getContext("2d");
setInterval((function (c, i) {
return function () {
draw_anim(c, 10, 10, i);
};
})(context, img_obj), 100);
}
这就是我解决问题的方法。希望这对您有所帮助。 （已测试）
我相信您正在寻找http://slbkbs.org/jsgif
不幸的是，DOM 不会公开 GIF 的各个帧，因此这是通过下载 GIF（使用 XMLHttpRequest）、解析它并在
上绘制它来完成的。<canvas>
对于仍然遇到此问题的人，或者那些不想动态加载图像或弄清楚需要使用多少帧的人；
将动画GIF保留在HTML页面上，在CSS中设置为display:block、visibility:visible和position:relative。使用负的 margin-top/z-index （或者你有的）动态地将它定位在画布下。然后设置一个 JavaScript 计时器，根据需要重复调用drawImage，以便正确刷新图像。
如果图像在 DOM 中不可见，则 drawImage 例程无法获取动画的后续帧。如果图像绝对位于画布下方，则渲染会滞后。
嗯，正如其他人已经说过的，你必须将 pe 动画分割成帧。我解决这个问题的方式更多的是个人喜好，但我在 GIMP 中打开 GIF 并使用插件将所有显示为单独图层的帧转换为精灵表。然后我只需要为画布中的精灵设置动画，这要容易得多。
这是插件的链接：D
--更新：
原始链接现在返回 404，这里是该插件的 GitHub 存储库的链接：https://github.com/BdR76/GimpSpriteAtlas .
如果您已经在画布中编程了某种帧速率，那么将 gif 导出为图像序列可能是一个不错的策略。
在 Photoshop 中，您可以打开 gif（打开时间轴窗口），然后“文件 > 导出 > 渲染视频”并选择“Photoshop 图像序列”。
预加载它们，添加一个计数器，然后使用drawImage根据计数器绘制正确的图像。
Canvas 动画不是 HTML5 规范的一部分。要么恢复到 GIF，要么考虑使用基于 JavaScript 的库来渲染 SVG 或回退到 Canvas/VML：http://raphaeljs.com/