如何在HTML5中在画布中播放gif

Question

我想在画布里面玩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';
}

Answer 1

你不能因为canvas没有提供任何方法来处理GIF动画。你应该将gif分成单个帧然后创建一个spritesheet并为它复制当前帧的动画。

Answer 2

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

Answer 3

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