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

这篇文章将为大家详细讲解有关如何使用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代码：

if ('getContext' in document.createElement('canvas')) {  HTMLImageElement.prototype.play = function() {   if (this.storeCanvas) {    // 移除存储的canvas    this.storeCanvas.parentElement.removeChild(this.storeCanvas);    this.storeCanvas = null;    // 透明度还原    image.style.opacity = '';   }   if (this.storeUrl) {    this.src = this.storeUrl;    }  };  HTMLImageElement.prototype.stop = function() {   var canvas = document.createElement('canvas');   // 尺寸   var width = this.width, height = this.height;   if (width && height) {    // 存储之前的地址    if (!this.storeUrl) {     this.storeUrl = this.src;    }    // canvas大小    canvas.width = width;    canvas.height = height;    // 绘制图片帧（第一帧）    canvas.getContext('2d').drawImage(this, 0, 0, width, height);    // 重置当前图片    try {     this.src = canvas.toDataURL("image/gif");    } catch(e) {     // 跨域     this.removeAttribute('src');     // 载入canvas元素     canvas.style.position = 'absolute';     // 前面插入图片     this.parentElement.insertBefore(canvas, this);     // 隐藏原图     this.style.opacity = '0';     // 存储canvas     this.storeCanvas = canvas;    }   }  }; }   var image = document.getElementById("testImg"),   button = document.getElementById("testBtn");   if (image && button) {  button.onclick = function() {   if (this.value == '停止') {    image.stop();    this.value = '播放';   } else {    image.play();    this.value = '停止';   }  }; }

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

不足：

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

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

JavaScript有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

关于“如何使用JS和canvas实现gif动图的停止和播放代码”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。