Question

我正在尝试将动画gif添加到html5画布对象中。问题是，一旦添加它就不会播放并停留在第一帧。我已经在Chrome和Firefox中测试了HTML5文档，并且出现了同样的问题。我在Chrome和Firefox中打开了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>

非常感谢任何帮助。

Answer 1

你不能因为canvas没有提供任何方法来处理GIF动画。你应该将gif分成单个帧然后创建一个spritesheet并为它复制当前帧的动画。

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

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

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

1 个答案: