HTML5 画布中的动画 GIF

Posted

技术标签:

【中文标题】HTML5 画布中的动画 GIF【英文标题】:Animated GIF in HTML5 canvas 【发布时间】:2011-03-04 23:36:16 【问题描述】:

html5 中,如何在有效的画布中轻松绘制(请不要使用太多复杂的代码)动画 GIF(drawImage 仅在画布中显示第一帧)

【问题讨论】:

这可能有用:github.com/matt-way/gifuct-js 另一个可能值得一看的库:github.com/benwiley4000/gif-frames 【参考方案1】:

相信你在找http://slbkbs.org/jsgif

不幸的是,DOM 不会暴露 GIF 的单个帧,因此这是通过下载 GIF(使用 XMLHttpRequest)、解析它并在 <canvas> 上绘制来完成的。

【讨论】:

【参考方案2】:

如果 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);

这就是我解决问题的方法。希望这对您有所帮助。 (已测试)

【讨论】:

这有点老了。我现在处理它的方式会大不相同。如果您不介意在代码中添加新库,请使用这些 cmets 中建议的众多可用替代方案之一。考虑到 ES6 的出现,这将更好地重构为具有更多功能的类。 :)【参考方案3】:

对于仍然遇到此问题的任何人,或者那些不想动态加载图像或弄清楚他们需要使用多少帧的人;

将动画 GIF 留在 HTML 页面上,在 CSS 中设置为 display:block、visibility:visible 和 position:relative。以负边距顶部/z-index(或你有什么)将其动态定位在画布下。然后设置一个 javascript 计时器,该计时器重复调用 drawImage,以尽可能快地正确刷新图像。

如果图像在 DOM 中不可见,则 drawImage 例程无法获取动画的后续帧。如果图像绝对位于画布下方,则渲染会滞后。

【讨论】:

你不能像这样分层,除非你把多个画布放在一起 我不认为 Ayelis 提出了多个画布层。而是将图像作为常规的 img 标签加载到 html 层(可以本地处理 gif 动画),并在其样式标签中使用 z-index 人为地将它们提升到画布层之上。这不适用于所有情况,因为您不能在“上方”放置画布元素,但它可以用于始终“位于顶部”的显示组件。您可以通过更改图像元素的 html“顶部”和“左侧”设置来在屏幕上移动图像。 没错。这是我在专业应用程序中使用的一种方法,目的是从动画 GIF 中提取帧并将它们“blit”到画布中。本质上,GIF 隐藏在画布下方。不能将其设置为不可见或屏幕外,因为否则框架不会被拉出,至少在 Chrome 实例和我在 2014 年测试代码的 VTC1010 上是这样。【参考方案4】:

好吧,正如其他人已经说过的那样,您必须将 pe 动画分割成帧。我解决这个问题的方法更多的是个人喜好,但我在 GIMP 中打开 GIF 并使用插件将所有显示为单独图层的帧转换为精灵表。然后我只需要在画布中为精灵设置动画,这要容易得多。

这是插件的link:D

【讨论】:

插件链接为404:gimp.org/registry/node/20943【参考方案5】:

Canvas 动画不是 HTML5 规范的一部分。要么恢复为 GIF,要么考虑使用基于 JavaScript 的库来呈现 SVG 或回退到 Canvas/VML:http://raphaeljs.com/

【讨论】:

以上是关于HTML5 画布中的动画 GIF的主要内容,如果未能解决你的问题,请参考以下文章

使用画布的 HTML5 中的逐帧动画

在 HTML5 画布上动画绘制路径

在动画 cc 中停止 HTML5 画布中的声音

为啥在 html5 中使用画布制作动画?

使用算法制作动画 GIF 的最佳方法是啥?

使用imagemagick的动画gif中的多种透明颜色?