GIF动画不在HTML5下浏览器中播放

我试图给html5画布对象添加一个GIF动画。问题是，一旦添加它不会播放并停留在第一帧。我已经在Chrome和Firefox中测试了HTML5文档，并且发生了同样的问题。我已经在Chrome和Firefox打开GIF，以确保运行其动画和它运行良好，只是没有在HTML5画布对象...GIF动画不在HTML5下浏览器中播放

下面是代码：

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript"> 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var img=new Image(); 
img.onload = function(){ 
ctx.drawImage(img,0,0); 
}; 
img.src="enemy1.gif"; 
</script> 
</body> 
</html>

任何非常感谢帮助。

来源

2012-04-15 thed0ctor

http://stackoverflow.com/q/9276594/585339 – enderskill 2012-04-15 05:51:01

你不能像canvas那样不提供任何方法来处理GIF动画。您应该将gif分割成单个帧，然后创建一个spritesheet并为其复制当前帧进行动画处理。

信用：https://stackoverflow.com/a/9278770/283863

什么是一个spritesheet样子？它看起来像这样：
enter image description here

来源

2012-04-15 05:56:53

的可能的复制此链接帮助我实现这一点，我想这是值得[注意]（HTTP：// atomicrobotdesign。 com/blog/web-development/how-to-use-sprite-sheets-with-html5-canvas /）非常简单的方法。此外，为了将动画gif转换为spritesheet，我使用了[免费程序]（http://www.bottomap.com/Software/A4B/A4B.html）。我在Ubuntu上，它在葡萄酒中工作得很好。 – thed0ctor 2012-04-15 16:27:51

GIF动画不在HTML5下浏览器中播放

回答

相关问题