1

我正在尝试将动画 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>

任何帮助深表感谢。

4

1 回答 1

2

你不能,因为画布没有提供任何处理动画 gif 的方法。您应该将 gif 拆分为单个帧,然后创建一个 spritesheet 并为其复制当前帧设置动画。

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

精灵表是什么样的?它看起来像这样:
在此处输入图像描述

于 2012-04-15T05:56:53.327 回答