前言
相信大家小时候一定玩过这样的小人书：

原理是快速切换图片，利用人眼的 视觉暂留(Persistenceofvision)现象，脑补产生动画效果。其实我们的 vedio、GIF 等也是这样实现的，只是它的帧速可能更高。

下面我们就利用 爱奇艺万能播放器 拆分一张GIF图

获得 timg_vedio
显示本地图片
先将照片显示至 Web上，HTML5 中有两种标签可实现：

img
canvas
img
可使用其 src 指定图片，支持 .jpg、.png、.bmp

canvas
canvas 是画布，我们可通过 drawImage() 令其绘制图像：

drawImage(mixed image, int x, int y)
以canvas上指定的坐标点开始，按照图像的原始尺寸大小绘制整个图像。这里的image可以是Image对象，也可以是Canvas对象(下同)。

drawImage(mixed image, int x, int y, int width, int height)
以canvas上指定的坐标点开始，以指定的大小(width和height)绘制整个图像，图像将根据指定的尺寸自动进行相应的缩放。

drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
将指定图像的局部图像(以(imageX, imageY)为左上角、宽度为imageWidth、高度为imageHeight的矩形部分)绘制到canvas中以(canvasX,canvasY)为左上角坐标、宽度为canvasWidth、高度为canvasHeight的矩形区域中

var imge=document.getElementById(“bmp-test1”);

var cjpg=document.getElementById(“c-jpg”);
var cjpg_tx=cjpg.getContext(“2d”);

// onload 图片加载完后执行
imge.onload=function(){
// 图像偏移x50 y50 图像大小110*110
cjpg_tx.drawImage(imge,50,50,110,110);
}

值得注意的是 JS 中图片为 异步加载，所以我们必须等图片加载完后我们使用 drawImage( )才有效。

canvas实现动画效果
遍历
for (let index = 1; index < 20; index++) {
let testimge=new Image();
let imagename=”timg_vedio/timg_”+index+”.jpg”;
testimge.src=imagename;
testimge.onload=function(){
cjpg_tx.drawImage(testimge,50,50,110,110);
}
}

Q&A
Q: 由于JS 异步机制，无法保证 drawImage( ) 按顺序执行
A: 预加载 策略

var imgWrap = [];
//预加载
for (let i = 1; i < 20; i++) {

let imagename="timg_vedio/timg_"+i+".jpg";
imgWrap[i]=new Image();
imgWrap[i].src=imagename;

}
//定时循环显示
var index = 1;
window.setInterval(function() {
if(index < imgWrap.length-1){
index++;
}
else{
index = 1
}
cjpg_tx.drawImage(imgWrap[index],20,20,110,110);
},80);

代码及图片资源可至百度云 下载（请戳） 提取码: 33xq
————————————————

原文链接：https://blog.csdn.net/weixin_40774605/article/details/106627696