我想在画布上显示一个动画gif，并应用了一些转换。为了测试一下，我目前只是想在画布上显示动画gif，因此它基本上等于将gif显示为常规<img>标签。
我正在使用Chrome和webkitRequestAnimationFrame。在每个请求框架上，我绘制图像。当gif框架发生变化时，应该在画布上反映出来。这只能部分起作用：
这是我设置的小提琴：http://jsfiddle.net/eGjak/93/。
如何在画布上绘制动画gif，实际上是动画？
答案 0 :(得分：3)
img是DOM的一部分或可见，则将引用动画gif的img标记写入画布会导致写入的gif的不同帧至少在Chrome中发生了变化。可能有也可能没有关于此行为的正确行为的文档。 ：）此外，webkitRequestAnimationFrame不再具有另外一个参数的行为，一个元素X使得当X不可见时，所请求的函数将不会运行。出于性能和电池寿命的原因，您可能希望传递给requestAnimationFrame的许多功能在执行任何需要绘图的操作之前检查可见性。
查看固定版本：
如果向绘制图像的函数添加console.log()，您将看到它正在被调用。问题似乎是图像本身没有动画，可能是因为浏览器不打算更新不属于DOM的动画图像。
我的解决方案是制作DOM的动画gif部分并且大小为0，它的工作正常。
您可以通过加载http://jsfiddle.net/eGjak/96/show/并在Windows或Linux / alt-cmd-I上使用ctrl-shift-I检查元素来验证动画是否显示在画布上而不是图像标记中。
编辑 ：这是奖金！
webkitRequestAnimationFrame比Mozilla等价物多一个参数，以允许您的动画仅在被动画的元素可见时运行。看看
然后打开控制台。你会看到，当你隐藏画布时，动画函数会停止被调用。当您再次切换画布时，将再次调用动画函数。