HTML5canvas中的GIFanimation

在HTML5中,我怎样才能轻松绘制(不要太复杂的代码)一个animation的GIF在一个工作的canvas(与drawImage只有第一帧显示在canvas上)

那么,如果gif文件的自动化canvasanimation不可用,你可以尝试使用精灵表,但这确实需要更多的代码。

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

这是我如何解决这个问题。 希望这有帮助。 (testing)

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

不幸的是,DOM不公开GIF的单个框架,所以这是通过下载GIF(使用XMLHttpRequest),parsing并在<canvas>上绘制的。

对于仍然有问题的人,或者不想dynamic加载图像的人,或者想知道他们需要使用多less帧;

将animationGIF保留在HTML页面上,设置为在CSS中显示:block,visibility:visible和position:relative。 dynamic地将其放置在canvas下,并带有负边距/ Z-索引(或您有什么)。 然后设置一个反复调用drawImage的JavaScript定时器,以便根据需要快速刷新图像。

如果图像在DOM中不可见,则drawImage例程无法获取animation的后续帧。 如果图像完全位于canvas下方,则渲染滞后。

那么,正如其他人已经说过,你必须拆分帧animation。 我解决问题的方法更多的是个人喜好,但是我打开GIMP中的GIF并使用插件将所有显示为单独图层的框架转换为精灵表。 然后,我只需要在canvas上设置animation就可以了。

这里是插件的链接 :D

canvasanimation不是HTML5规范的一部分。 要么恢复到GIF,要么考虑一个基于JavaScript的库来呈现SVG或者回退到Canvas / VML: http : //raphaeljs.com/