Html HTML5 画布中的动画 GIF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3062229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animated GIF in HTML5 canvas
提问by julio
In HTML5, how can I draw easily (no too much complex code please) an animated GIF in a canvas that works (with drawImage only first frame is shown in the canvas)
在 HTML5 中，如何轻松地（请不要使用太多复杂的代码）在画布中绘制动画 GIF 有效（使用 drawImage 画布中仅显示第一帧）
回答by rodrigob
I believe you are looking for http://slbkbs.org/jsgif
我相信你正在寻找http://slbkbs.org/jsgif
Unfortunately, the DOM doesn't expose individual frames of a GIF, so this is done by downloading the GIF (with XMLHttpRequest), parsing it, and drawing it on a
<canvas>.
不幸的是，DOM 不会公开 GIF 的各个帧，因此这是通过下载 GIF（使用 XMLHttpRequest）、解析它并在
<canvas>.
回答by Adrian Castravete
Well if automated canvas animation of gif files isn't available, you could try using sprite-sheets, but that indeed would require a bit more code.
好吧，如果 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);
}
This is how I'd tackle the problem. Hope this has been helpful. (tested)
这就是我解决问题的方式。希望这有帮助。（已测试）
回答by Rototu Tank
Well, as other people said already, you have to split pe animation in frames. My way of tackling the problem is more of a personal preference, but I open the GIF in GIMP and using a plugin I convert all the frames which are displayed as individual layers into a sprite sheet. Then I only have to animate the sprite in the canvas which is much easier.
好吧，正如其他人所说的那样，您必须以帧为单位拆分 pe 动画。我解决这个问题的方法更多是个人偏好，但我在 GIMP 中打开 GIF 并使用插件将所有显示为单个图层的帧转换为精灵表。然后我只需要在画布中为精灵设置动画，这要容易得多。
Here is the linkfor the plugin :D
这是插件的链接：D
回答by Ayelis
For anyone still having trouble with this, or those who don't want to load their images dynamically or figure out how many frames they need to use;
对于仍然有问题的任何人，或者那些不想动态加载图像或弄清楚他们需要使用多少帧的人；
Leave the animated GIF on the HTML page, set to display:block, visibility:visible, and position:relative in the CSS. Dynamically position it under the canvas with a negative margin-top/z-index (or what have you). Then set a JavaScript timer that calls drawImage repeatedly, as fast as you need in order to refresh the image properly.
将动画 GIF 留在 HTML 页面上，在 CSS 中设置为 display:block、visibility:visible 和 position:relative。使用负边距顶部/ z 索引（或你有什么）动态地将它定位在画布下。然后设置一个重复调用 drawImage 的 JavaScript 计时器，以您需要的速度来正确刷新图像。
If the image is not visible in the DOM, the drawImage routine cannot acquire subsequent frames of the animation. If the image is absolutely positioned under the canvas, the rendering lags.
如果图像在 DOM 中不可见，则 drawImage 例程无法获取动画的后续帧。如果图像绝对位于画布下方，则渲染会滞后。
回答by Andrew Kolesnikov
Canvas animation is not part of the HTML5 spec. Either revert to GIF or consider a JavaScript-based library that renders SVG or falls back to Canvas/VML: http://raphaeljs.com/
画布动画不是 HTML5 规范的一部分。要么恢复为 GIF，要么考虑使用基于 JavaScript 的库来呈现 SVG 或回退到 Canvas/VML：http: //raphaeljs.com/
