如何在HTML5的画布中播放gif图像

Question

我想在HTML画布中播放动态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';
}

- Namratha

---

这个图片路径正确吗？你应该避免在URL中使用空格，但如果必须使用，需要用“%20”来替换它们。 - Alex Morales

我尝试过去掉空格，但仍然没有任何区别。 - Namratha

看看我发布的答案。你应该能够用那种方式做到。 - Alex Morales

这个回答是否解决了你的问题？在HTML5画布中使用动画GIF。 - ggorlen

Answer 1

由于canvas没有提供处理动态gif的方法，因此您需要将gif拆分为单个帧，然后创建一个精灵图并复制当前帧进行动画处理。

- rezoner

Answer 2

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

- forresto

---

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

Answer 3

我找到了一篇回答你问题的文章。基本上，当你将一个动态gif添加到画布元素中时，它会显示图像在包含时的确切状态。所以，正如rezoner所说，你需要创建一个精灵表并使用javascript进行动画处理。

- Alex Morales