JS——canvas(1)

最新推荐文章于 2024-07-19 14:10:02 发布

spfLinux

最新推荐文章于 2024-07-19 14:10:02 发布

阅读量296

点赞数

分类专栏： js 文章标签： JS canvas

js 专栏收录该内容

137 篇文章

订阅专栏

本文通过三个实例演示了如何使用HTML5的Canvas元素实现基本的动画效果：左右移动、上下移动和斜向移动。每个实例中都详细展示了如何利用JavaScript定时器进行元素的位置更新，并处理边界反弹，以创建流畅的动画体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

左右移

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<canvas id="c2" width="500" height="400">
		您的浏览器版本太低，请升级！
	</canvas>

	<script>
		var c2=document.getElementById("c2");
		var ctx=c2.getContext("2d");
		ctx.fillStyle="blue";
		var x=0;
		var xDir=1;
		var timer=setInterval(function(){
			ctx.clearRect(0,0,500,400);
			ctx.fillRect(x,0,100,80);
			x+=5*xDir;
			if(x>400){
				xDir=-1;
			}else if(x<0){
				xDir=1;
			}
		},50);
		//抖动问题是因为定时器不准确
	</script>
</body>
</html>

上下移

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<canvas id="c2" width="500" height="400">
		您的浏览器版本太低，请升级！
	</canvas>

	<script>
		//IE
		var c2=document.getElementById("c2");
		var ctx=c2.getContext("2d");
		ctx.fillStyle="blue";
		var y=0;
		var yDir=1;
		var timer=setInterval(function(){
			ctx.clearRect(0,0,500,400);
			ctx.fillRect(0,y,100,80);
			y+=5*yDir;
			if(y>320){
				yDir=-1;
			}else if(y<0){
				yDir=1;
			}
		},50);
		//抖动问题是因为定时器不准确
	</script>
</body>
</html>

斜移

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<canvas id="c2" width="500" height="400">
		您的浏览器版本太低，请升级！
	</canvas>

	<script>
		//IE
		var c2=document.getElementById("c2");
		var ctx=c2.getContext("2d");
		ctx.fillStyle="blue";
		var x=0;
		var y=0;
		var xDir=1;
		var yDir=1;
		var timer=setInterval(function(){
			ctx.clearRect(0,0,500,400);
			ctx.fillRect(x,y,100,80);
			x+=5*xDir;
			y+=5*yDir;
			if(y>320){
				yDir=-1;
			}else if(y<0){
				yDir=1;
			}

			if(x>400){
				xDir=-1;
			}else if(x<0){
				xDir=1;
			}
		},50);
		//抖动问题是因为定时器不准确
	</script>
</body>
</html>