<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<!--<img src="image/01.jpg" alt="">-->
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
var image = new Image();
image.onload = function () {
/*图片加载完成*/
/*动态的去获取当前图片的尺寸*/
var imageWidth = image.width;
var imageHeight = image.height;
/*计算出每一个小人物的尺寸*/
var personWidth = imageWidth/4;
var personHeight = imageHeight/4;
/*位截取图片*/
/*帧动画 在固定的时间间隔更换显示的图片 根据图片的索引*/
var index = 0;
/*绘制在画布的中心*/
/*图片绘制的起始点*/
var x0 = ctx.canvas.width /2 - personWidth / 2;
var y0 = ctx.canvas.height /2 - personHeight / 2;
ctx.drawImage(image,0,0,personWidth,personHeight,x0,y0,personWidth,personHeight);
setInterval(function () {
index ++;
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.drawImage(image,index * personWidth,0,personWidth,personHeight,x0,y0,personWidth,personHeight);
if(index >= 3){
index = 0;
}
},1000);
};
image.src = 'image/04.png';
</script>
</body>
</html>运行结果如下:
