Анимированный GIF в холсте HTML5

В HTML5, как я могу легко (без сложного кода) рисовать анимированный GIF в холсте, который работает (с drawImage показан только первый кадр на холсте)

Ответ 1

Хорошо, если автоматическая анимация холста gif файлов недоступна, вы можете попробовать использовать спрайт-листы, но для этого потребуется немного больше кода.

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);
}

Вот как я мог бы решить эту проблему. Надеюсь, это было полезно. (Проверено)

Ответ 2

Я считаю, что вы ищете http://slbkbs.org/jsgif

К сожалению, DOM не раскрывает отдельные кадры GIF, поэтому это делается путем загрузки GIF (с XMLHttpRequest), разбора его и рисования на <canvas>.

Ответ 3

Для тех, у кого по-прежнему возникают проблемы с этим, или тех, кто не хочет динамически загружать свои изображения или выяснить, сколько кадров они должны использовать;

Оставьте анимированный GIF на странице HTML, чтобы отображать: block, visibility: visible и position: relative в CSS. Динамически позиционируйте его под холстом с отрицательным margin-top/z-index (или тем, что у вас есть). Затем установите таймер JavaScript, который вызывает drawImage несколько раз, так быстро, как вам нужно, чтобы правильно обновить изображение.

Если изображение не отображается в DOM, процедура drawImage не может получить последующие кадры анимации. Если изображение абсолютно позиционируется под холстом, рендеринг лагов.

Ответ 4

Ну, как уже говорили другие люди, вам нужно разделить pe анимацию в фреймах. Мой способ решения проблемы - это скорее личное предпочтение, но я открываю GIF в GIMP и используя плагин, я конвертирую все кадры, которые отображаются как отдельные слои в лист спрайта. Тогда мне нужно только оживить спрайт в холсте, который намного проще.

Вот ссылка для плагина: D

Ответ 5

Анимация Canvas не является частью спецификации HTML5. Вернитесь к GIF или рассмотрите библиотеку на основе JavaScript, которая отображает SVG или возвращается к Canvas/VML: http://raphaeljs.com/