google-chrome - 为什么在 Canvas 上绘制动画 gif 仅在重新选择选项卡后才会更新？

Question

我想在 Canvas 上显示一个应用了一些转换的动画 gif。为了测试，我目前只是尝试在 Canvas 上显示动画 gif，因此它本质上等于将 gif 显示为常规 <img>标签。

我正在使用 Chrome 和 webkitRequestAnimationFrame .在每个请求帧上，我绘制图像。当 gif 帧改变时，这应该反射(reflect)在 Canvas 上。这仅部分有效:

仅观看 Canvas 并不会使其更新。相反，开始绘制一个静止帧。

重新选择选项卡(即选择另一个选项卡并再次选择 Canvas 选项卡)会将其更新为新框架，但之后它再次卡住。

这是我设置的 fiddle : http://jsfiddle.net/eGjak/93/ .

如何在 Canvas 上绘制动画 gif 并使其实际动画化？

Answer 1

答案不再有效

看起来这里描述的行为(如果 img 是 DOM 的一部分或可见，则将引用动画 gif 的 img 标记写入 Canvas 会导致正在写入的 gif 的不同帧)至少在 Chrome 中发生了变化。可能有也可能没有关于什么是正确行为的文档。 :)

另外，webkitRequestAnimationFrame不再具有采用一个额外参数的行为，即一个元素 X，这样当 X 不可见时，所请求的函数将不会运行。出于性能和电池生命周期的原因，您可能需要传递给 requestAnimationFrame 的许多功能。在他们做任何需要绘图的事情之前检查可见性。

前:

查看固定版本:

http://jsfiddle.net/eGjak/96/

如果您添加 console.log()到绘制图像的函数，您会看到它正在被调用。问题似乎是图像本身没有动画，可能是因为浏览器不会更新不属于 DOM 的动画图像。

我的解决方案是使 DOM 的动画 gif 部分和大小为 0，它工作得很好。

您可以通过加载 http://jsfiddle.net/eGjak/96/show/ 来验证动画是否显示在 Canvas 上，而不是显示在图像标签中。并在 Windows 或 Linux/alt-cmd-I 上使用 ctrl-shift-I 检查元素。

编辑 : 这是福利!
webkitRequestAnimationFrame比 Mozilla 等价物多一个参数，以允许您的动画仅在被动画化的元素可见时运行。查看

http://jsfiddle.net/kmKZa/8/

并打开控制台。您会看到，当您隐藏 Canvas 时，动画函数将停止调用。当您再次切换 Canvas 可见时，将再次调用动画函数。