使用射流研究…和帆布实现可交换的图像格式动图的停止和播放代码

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

超文本标记语言代码：

img id=' Testimg ' src=' http : xx。gif ' width=' 224 ' height=' 126 ' pinput type=' button ' id=' TestBtn ' value='停止/pJS代码：

if ('getContext '在document.createElement('canvas ')中){ html imageelement。原型。play=function(){ if(this。商店画布){//移除存储的帆布这个。商店帆布。parentelement。移除子(这个。商店画布)；this.storeCanvas=null//透明度还原图像.样式。不透明度=' ';}如果(这个。存储URl){ this。src=这个。存储URl} };html imageelement。原型。stop=function(){ var canvas=document。创建元素(“画布”)；//尺寸var width=this.width，height=this.heightif(宽度高度){ //存储之前的地址if(！这个。存储URl){ this。存储URl=这个。src} //画布大小canvas.width=宽度；canvas.height=高度；//绘制图片帧（第一帧)canvas.getContext('2d ').drawImage(这个，0,0,宽度，高度);//重置当前图片尝试{这个。src=画布。todaytaul(' image/gif ')；} catch(e) { //跨域这个。移除属性(' src ')；//载入帆布元素canvas.style.position='绝对；//前面插入图片这个。ParentElement。在(画布，这个);//隐藏原图这个。风格。不透明度=' 0 '；//存储canvas this . store canvas=canvas } } }；} var image=文档。getelementbyid(' test mg ')，button=document。getelementbyid(' test BTN ')；if(图像按钮){ button。onclick=function(){ if(this。值=='停止){ image。stop()；this.value='播放；} else { image。play()；this.value='停止；} };}上面代码并未详尽测试，以及可能的体验问题（工业工程闪动)没有具体处理（影响原理示意),若要实际使用，需要自己再微调完美下。

不足：

1.IE9支持IE7/IE8不支持帆布没搞头。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。