Как играть в GIF внутри холста в HTML5

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 на отдельные кадры, затем создать spritesheet и анимировать его, копируя текущий кадр.

Answer 2

Вы можете декодировать GIF с помощью JavaScript и записывать кадры на холст.Чек http://slbkbs.org/jsgif/

Answer 3

Я нашел статью, которая отвечает на ваш вопрос .По сути, когда вы добавляете анимированный GIF-элемент к элементу canvas, он отображает точное состояние, в котором находится изображение, когда оно включено.Итак, как говорит Резонер, вам нужно создать таблицу спрайтов и анимировать ее с помощью javascript.