如何用Fabricjs播放gif？

Question

我知道fabricjs可以播放视频和精灵表，但是我有很多gif文件，我可以直接用fabricjs播放这些gif吗？我无法在Fabricjs网站上找到方法。

Answer 1

根据有关Canvas 2DRenderingContext drawImage方法的规范，

Specifically, when a CanvasImageSource object represents an animated image in an 
HTMLImageElement, the user agent must use the default image of the animation (the one 
that the format defines is to be used when animation is not supported or is 
disabled), or, if there is no such image, the first frame of the animation, when 
rendering the image for CanvasRenderingContext2D APIs.

这意味着仅将动画画布的第一帧绘制在画布上。 这是因为我们对img标签内的动画没有任何控制。

fabricjs基于canvas API，因此受到相同规则的约束。

解决方案是您需要解析动画gif中的所有静止图像，并将其导出为sprite-sheet。然后，借助sprite类，您可以轻松地在fabricjs中对其进行动画处理。