详解如何使用JS和canvas实现gif动图的停止和播放

HTML5 canvas可以读取图片信息，绘制当前图片。于是可以实现图片马赛克，模糊，色值过滤等很多图片特效。我们这里不用那么复杂，只要读取我们的图片，重绘下就可以。

HTML代码：

<img id="testImg" src="xxx.gif" width="224" height="126">
<p><input type="button" id="testBtn" value="停止"></p>

JS代码：

上面代码并未详尽测试，以及可能的体验问题（IE闪动）没有具体处理（影响原理示意），若要实际使用，需要自己再微调完美下。

不足：

1. IE9+支持。IE7/IE8不支持canvas没搞头。

2. 只能停止gif，不能真正意义的暂停。因为canvas获得的gif图片信息为第一帧的信息，后面的貌似获取不到。要想实现暂停，而不是停止，还需要进一步研究，如果你有方法，非常欢迎分享。

以上就是详解如何使用JS和canvas实现gif动图的停止和播放的详细内容，更多请关注Gxl网其它相关文章！