gif比html5大,Animated GIF in HTML5 canvas

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

In HTML5, how can I draw easily (no too much complex code please) an animated GIF in a canvas that works (with drawImage only first frame is shown in the canvas)

回答1:

I believe you are looking for http://slbkbs.org/jsgif

Unfortunately, the DOM doesn't expose individual frames of a GIF, so this is done by downloading the GIF (with XMLHttpRequest), parsing it, and drawing it on a .

回答2:

Well if automated canvas animation of gif files isn't available, you could try using sprite-sheets, but that indeed would require a bit more code.

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() { //

...

var canvas = document.getElementById('canvasElement');

//

var context = canvas.getContext("2d");

setInterval((function (c, i) {

return function () {

draw_anim(c, 10, 10, i);

};

})(context, img_obj), 100);

}

This is how I'd tackle the problem. Hope this has been helpful. (tested)

回答3:

For anyone still having trouble with this, or those who don't want to load their images dynamically or figure out how many frames they need to use;

Leave the animated GIF on the HTML page, set to display:block, visibility:visible, and position:relative in the CSS. Dynamically position it under the canvas with a negative margin-top/z-index (or what have you). Then set a JavaScript timer that calls drawImage repeatedly, as fast as you need in order to refresh the image properly.

If the image is not visible in the DOM, the drawImage routine cannot acquire subsequent frames of the animation. If the image is absolutely positioned under the canvas, the rendering lags.

回答4:

Well, as other people said already, you have to split pe animation in frames. My way of tackling the problem is more of a personal preference, but I open the GIF in GIMP and using a plugin I convert all the frames which are displayed as individual layers into a sprite sheet. Then I only have to animate the sprite in the canvas which is much easier.

Here is the link for the plugin :D

回答5:

Canvas animation is not part of the HTML5 spec. Either revert to GIF or consider a JavaScript-based library that renders SVG or falls back to Canvas/VML: http://raphaeljs.com/