Question

在HTML5中，我如何轻松绘制（请不要太复杂的代码）画布中的动画GIF可以正常工作（画布中只显示第一帧的drawImage）

Answer 1

不幸的是，DOM不会公开GIF的各个帧，所以这是通过下载GIF（使用XMLHttpRequest），解析它并在<canvas>上绘制来完成的。

Answer 2

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

这就是我解决这个问题的方法。希望这有帮助。（测试）

Answer 3

对于仍然遇到此问题的人，或者那些不想动态加载图片或想出他们需要使用多少帧的人;

将动画GIF保留在HTML页面上，设置为在CSS中显示：block，visibility：visible和position：relative。使用负margin-top / z-index（或者你有什么）动态地将它放置在画布下。然后设置一个JavaScript计时器，它会根据需要重复调用drawImage，以便正确刷新图像。

如果图像在DOM中不可见，则drawImage例程无法获取动画的后续帧。如果图像绝对位于画布下，则渲染会滞后。

Answer 4

好吧，正如其他人已经说过的那样，你必须在帧中分割pe动画。我解决问题的方法更多的是个人偏好，但我在GIMP中打开GIF并使用插件将所有显示为单独图层的帧转换为精灵表。然后我只需要在画布中为精灵设置动画就容易了。

以下是插件的link：D

Answer 5

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

HTML5画布中的动画GIF

5 个答案: