Html5 canvas 在HTML5画布中放置GIF文件会丢失动画

我正在尝试放置.gif文件（使用信息，比如直升机），我可以将其放置在画布中，但旋转叶片无法工作。 让我知道我错过了什么

jsfiddle:jsfiddle.net/sajesh1985/ptsdvbrt/

谢谢

---

Sajesh

您的小提琴显示了gif的使用，但无论是哪种情况：

当SVG是DOM的一部分时，浏览器可以直接驱动带有SMIL动画的SVG文件

如果将SVG作为源使用

drawImage（）

，则需要对SVG进行光栅化，当这种情况发生时，将忽略动画，并在其初始位置绘制SVG。绘制时，光栅化像素与任何其他已经存在的像素混合在一起-没有分离，因为画布只是一个位图

这同样适用于gif文件，只考虑第一帧

解决方案是准备一张包含要设置动画的帧的精灵图纸。以所需的间隔从中绘制一帧

var isvg=document.getElementById（“svg”）.outerHTML；
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
var svg=newblob（[isvg]，{type:“image/svg+xml；charset=utf-8”}）；
var url=url.createObjectURL（svg）；
var img=新图像（）；
img.onload=牵引；
img.src=url；
//这将始终在初始位置绘制SVG
函数绘图（）{
setInterval（函数（）{
ctx.drawImage（img，0，0）
}, 33);
}

canvas{border:1px solid#000}

让我知道我的分数降低的原因…这不是一个有效的问题吗？Canvas会为你的.GIF绘制一个“快照”，这样你就不能使用GIF动画了。顺便说一句，我没有对你的问题投反对票，但你可能因为没有显示你遇到问题的代码的简短部分而被否决。你考虑过使用动画GIF编辑器吗？在

http://www.take1.de/

我已经很长时间没有使用它了，但我记得你可以用它编辑GIF文件并制作GIF动画。然后，您可以使用一个简单的图像标记来加载和显示GIF。