前言
相信大家小时候一定玩过这样的小人书：
原理是快速切换图片，利用人眼的 视觉暂留(Persistenceofvision)现象，脑补产生动画效果。其实我们的 vedio、GIF 等也是这样实现的，只是它的帧速可能更高。
下面我们就利用 爱奇艺万能播放器 拆分一张GIF图
- 获得
timg_vedio
显示本地图片
先将照片显示至 Web上，HTML5 中有两种标签可实现：
imgcanvas
img
可使用其 src 指定图片，支持 .jpg、.png、.bmp
<img id="jpg-test1" src="test1.jpg">
<img id="png-test1" src="test1.png">
<img id="bmp-test1" src="test1.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的矩形区域中
<!--为了更明显的显示效果，这里增加style样式-->
<canvas id="c-jpg" width="440" height="440"
style="background-color: #b39090;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
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
推荐阅读
再找资料的过程中，发现两篇写得特别清楚的文章，自叹不如，特此推荐：