JS——canvas(1)

最新推荐文章于 2023-11-17 11:22:29 发布

spfLinux

最新推荐文章于 2023-11-17 11:22:29 发布

阅读量236

点赞数

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

js 专栏收录该内容

137 篇文章 3 订阅

订阅专栏

左右移

<!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>