gif在html5中不播放,gif 图片在canvas 中的播放
一，原理
1.canvas、img、video，都是图像对象，属于图像类型的节点。这种图像对象不是Image 对象，而是对加载图像数据流的节点的统称。
img 里的图像数据来源于提前制作好图片文件的，是静止的，比如.jpg，.png，.svg 等。.gif 是个特殊存在，另当别论。
vedio 里的视频数据来源于提前制作好的视频文件，是动起来的。
canvas 图像数据是动态生成的。
2.图像对象的数据的读写
读取图像数据
img 和video 没有直接获取ImageData 的方法，但可以通过canvas 获取
canvas 使用getImageData 方法读取自身的图像数据
写入图像数据
img 和video 只能通过src ，以资源路径的方式设置其显示图像(img 的src 还可以使用base64)。但他们无法直接用ImageData 设置图像。
canvas 可以用drawImage 或fillStyle 方法，以图像对象为参数，为canvas 或其内部元素写入图像数据。canvas 也可以通过putImageData方法，以ImageData 对象为参数，为其写入图像数据。
3.gif 是介于图片和视频之间的特殊存在。
用读取image 数据的原理读取它，只能读到第一帧gif 图片。
直接绘制gif 肯定是不好使的
const img=document.getElementById("img");
const c=document.getElementById("c");
const ctx=c.getContext('2d');
ctx.drawImage(img,0,0);
利用requestAnimationFrame，频繁绘制，也不好使
const img=document.getElementById("img");
const c=document.getElementById("c");
const ctx=c.getContext('2d');
render();
function render(){
ctx.drawImage(img,0,0);
window.requestAnimationFrame(render);
}
用读取video 数据的原理读取它，video 根本就不认这种格式。
gif 数据的获取，只能追本溯源，用XHR 请求。
二，gif 数据读取并显示的流程
1.获取gif 数据
用XHR 请求gif 图片
设置图片的请求类型为纯文本格式：将请求头里的Content-Type 设置为“text/plain，如&
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！