HTML5画布中的动画GIF

Question

HTML5画布中的动画GIF

jul*_*lio 43 html5 canvas gif animated-gif

在HTML5中,我如何轻松绘制(请不要太复杂的代码)在画布中的动画GIF工作(使用drawImage只在画布中显示第一帧)

Answer 1

rod*_*gob 16

我相信你正在寻找http://slbkbs.org/jsgif

不幸的是,DOM没有暴露GIF的各个帧,所以这是通过下载GIF(使用XMLHttpRequest),解析它并在a上绘制它来完成的<canvas>.

Answer 2

Adr*_*ete 16

好吧,如果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);
}

Run Code Online (Sandbox Code Playgroud)

这就是我解决问题的方法.希望这有帮助.(测试)

Answer 3

And*_*kov -10

Canvas 动画不是 HTML5 规范的一部分。要么恢复到 GIF，要么考虑使用基于 JavaScript 的库来渲染 SVG 或回退到 Canvas/VML： http: //raphaeljs.com/

归档时间：	15 年，4 月前
查看次数：	89218 次
最近记录：	8 年，11 月前