animierte Gifs spielen nicht im Browser unter html5

Ich versuche ein animiertes GIF zu einem HTML5-Canvas-Objekt hinzuzufügen. Das Problem ist, dass es nach dem Hinzufügen nicht abgespielt wird und auf dem ersten Frame bleibt. Ich habe das HTML5-Dokument in Chrome und Firefox getestet und das gleiche Problem tritt auf. Ich habe die gif in Chrome und Firefox geöffnet, um sicherzustellen, dass es seine Animation läuft, und es funktioniert es gut laufen, nur nicht in einem HTML5-Canvas-Objekt ...animierte Gifs spielen nicht im Browser unter html5

Hier ist der Code:

<!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>

All Hilfe wird sehr geschätzt.

Quelle

2012-04-15 thed0ctor

Mögliche Duplikat http://stackoverflow.com/q/9276594/585339 – enderskill

Sie können nicht als Canvas keine Methoden zur Verfügung stellen, um mit animierten GIFs umzugehen. Sie sollten GIF in einzelne Frames teilen, dann ein Spritesheet erstellen und es animieren, den aktuellen Frame zu kopieren.

Credit: https://stackoverflow.com/a/9278770/283863

Was macht ein spritesheet aussieht? Es sieht wie folgt aus:
enter image description here

Quelle

2012-04-15 05:56:53

Dieser Link mir dies zu erreichen geholfen und ich dachte, es war es wert [Bemerkens] (http: // atomicrobotdesign. com/blog/web-entwicklung/how-to-use-sprite-blätter-mit-html5-leinwand /) Sehr einfache Vorgehensweise. Um ein animiertes GIF in ein Spritesheet zu konvertieren, habe ich das [kostenlose Programm] (http://www.bottomap.com/Software/A4B/A4B.html) benutzt. Ich bin auf Ubuntu und es funktionierte perfekt in Wein. – thed0ctor

animierte Gifs spielen nicht im Browser unter html5

Antwort

Verwandte Themen