绘制动画
程序员文章站
2022-03-01 15:05:32
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="600" height="400" style="border:1px solid #ccc;"></canvas>
</body>
</html>
<script>
var ctx = document.querySelector('canvas').getContext('2d');
var image = new Image();
image.onload = function(){
var imageW = image.width;
var imageH = image.height;
var personW = imageW / 4;
var personH = imageH / 4;
var x0 = ctx.canvas.width/2 - personW/2;
var y0 = ctx.canvas.height/2 - personH/2;
ctx.drawImage(image,0,0,personW,personH,x0,y0,personW,personH);
var index = 0;
setInterval(function(){
index++;
ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(image,index*personW,0,personW,personH,x0,y0,personW,personH);
if(index >= 3){
index = 0
}
},1000)
};
image.src='image/04.png';
</script>