如何在 HTML5 中的画布内播放 gif答案

【问题标题】：How to play gif inside canvas in HTML5如何在 HTML5 中的画布内播放 gif
【发布时间】：2012-03-05 19:17:17
【问题描述】：

我想在 HTML Canvas 中播放动画 GIF 文件。我使用了下面的代码，但它不起作用。

代码有什么问题？

var drawingCanvas = document.getElementById('myDrawingCanvas');
if(drawingCanvas.getContext) 
{
    var context = drawingCanvas.getContext('2d');
    var imgObj = new Image();

    imgObj.onload = function () 
    {       
        context.drawImage(imgObj, 0, 0, 1024, 600);
    }
    imgObj.src='HTML Images/Spell Bee/images/mainscreen.gif';
}

【问题讨论】：

图片路径正确吗？你应该避免在你的 url 中使用空格，但如果你必须用 '%20' 替换它们。
我也试过去掉空格。还是没有区别
看我贴的答案。你应该可以这样做。
这能回答你的问题吗？ Animated GIF in HTML5 canvas

标签： html canvas gif

【解决方案1】：

您实际上可以使用 JavaScript 解码 GIF 并将帧写入画布。检查http://slbkbs.org/jsgif/

【讨论】：

更新：最相关的是使用来自buzzfeed的fork：github.com/buzzfeed/libgif-js。他们 fork 引用了 @forresto 的项目，并添加了一些基本功能。

【解决方案2】：

我发现了一篇 answers your question 的文章。基本上，当您将动画 gif 添加到画布元素时，它会显示图像被包含时的确切状态。因此，正如 rezoner 所说，您需要创建一个 spritesheet 并使用 javascript 对其进行动画处理。

【讨论】：

【解决方案3】：

你不能，因为 canvas 没有提供任何处理动画 gif 的方法。您应该将 gif 拆分为单个帧，然后创建一个 spritesheet 并为其复制当前帧设置动画。

【讨论】：