精灵图动画canvas

最新推荐文章于 2023-12-13 13:52:16 发布

原创最新推荐文章于 2023-12-13 13:52:16 发布 · 366 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

如何使用精灵图

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>序列帧动画</title>


</head>
<style>
	* {
		padding: 0;
		margin: 0;
	}

	.box1 {
		position: relative;
	}

	.cs1 {
		position: absolute;
		width: 180px;
		height: 300px;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
	}

	div {
		background: url(./img/girl.png) center;
		background-repeat: no-repeat;
		/* background-position-x: 720px; */
		background-position-x: -1080px;
		width: 180px;
		height: 300px;
		animation: run;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: steps(6);
	}

	@keyframes run {
		0% {
			background-position-x: -1080px;
		}

		100% {
			background-position-x: 0px;
		}
	}
</style>

<body>
	<!--Just do it！-->
	<dl class="box1">
		<img src="./img/girl.png" class="img" alt="">
		<dd class="cs1"></dd>
	</dl>
	<div>

	</div>
	<canvas id="canvas" class="canvas" width="360" height="600" style="background:red;transform: scale(.5);">您的浏览器不支持
		HTML5 canvas 标签。</canvas>
	<script>


		// ctx.drawImage(image, dx, dy)
		// image：需要绘制的img图片

		// dx, dy：绘制的img图片在canvas中的坐标(x, y)
		//绘制图片
		// ctx.drawImage(image, dx, dy, dw, dh)
		// image：需要绘制的img图片
		// dx, dy：绘制的img图片在canvas中的坐标(x, y)
		// dw, dh：绘制的img图片在canvas中的大小(w, h)宽高

		// ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
		// image：需要绘制的img图片
		// sx, sy, sw, sh：定义图像源的切片位置和大小
		// dx, dy, dw, dh：定义切片的目标显示位置和大小

		document.querySelector(".img").onload = function () {
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d")
			// //创建图片
			let img = document.querySelector(".img")
			let step = 0
			setInterval(() => {
				ctx.clearRect(0, 0, 360, 600);
				if (step % 7 == 6) {
					step = 0
				} else {
					step++
				}
				console.log(12, step, 180 * step, 180 * (step + 1))
				ctx.drawImage(img, 180 * step, 0, 180, 300, 0, 0, 360, 600);
			}, 130);
		}
	</script>
</body>

</html>