<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
canvas {
border: 1px solid #ddd;
margin: 100px;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
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 / 10;
/*位截取图片,固定时间间隔更换图片*/
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;
}
}, 300)
}
image.src = "img/20181011151329.jpg";
</script>
</body>
Canvas画布绘制帧动画
最新推荐文章于 2024-08-02 14:17:59 发布