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下瀏覽器中播放

回答

相關問題