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/
