Preface
I believe you must have played such a little
human book when you were young: the principle is to quickly switch pictures, use human eyes, 视觉暂留(Persistenceofvision)现象and brain to produce animation effects. In fact, we are vedio, GIFand so is achieved, but its frame rate may be higher.
Next, we will use iQiyi Universal Player to split a GIF image
- obtain
timg_vedio
Show local pictures
First photos to display Webon, HTML5there are two labels can be achieved:
imgcanvas
img
It can be used srcto specify images, support .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
canvasIs the canvas, we can drawImage()make it draw the image:
-
drawImage(mixed image, int x, int y)
Start with the coordinate point specified on the canvas and draw the entire image according to the original size of the image. The image here can be an Image object or a Canvas object (the same below). -
drawImage(mixed image, int x, int y, int width, int height)
Starting from the specified coordinate point on the canvas, draw the entire image with the specified size (width and height), and the image will be automatically scaled according to the specified size. -
drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
Draw the partial image of the specified image (the rectangular part with (imageX, imageY) as the upper left corner, width as imageWidth, and height as imageHeight) into the canvas with (canvasX, canvasY) as the upper left corner coordinates, width as canvasWidth, height as canvasHeight In the rectangular area
<!--为了更明显的显示效果，这里增加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);
}
It is noteworthy that JSthe picture isAsynchronous loadingSo we have to wait after we use image loading drawImage( )to be effective.
Canvas achieve animation effects
Traverse
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 : Because of JS 异步机制, can not guarantee drawImage( )the implementation of the order
A : preloading strategy
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);
Code and pictures resources to Baidu cloud download (please stamp) extraction code: 33xq
Recommended reading
In the process of searching for information, I found two articles that were very clearly written. I sighed and recommended: