js实现移动的小车例子，点击按钮小车移动

最新推荐文章于 2024-08-31 16:09:29 发布

hello big_bear

最新推荐文章于 2024-08-31 16:09:29 发布

阅读量2.4k

点赞数 2

分类专栏：动画效果文章标签： js canvas html

本文链接：https://blog.csdn.net/big_beer/article/details/115550605

版权

动画效果专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章目录

学习内容
代码
效果图片
项目例子

学习内容

如何使用画布和纯js实现移动的小车？

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用画布和js做的一个移动小车</title>
	</head>
	<body>
	<canvas id="canvas" height="400px" width="1500px"></canvas>
	<hr />
	<button onclick="Go()">gogogo</button>
	</body>
	<script>
		    var t = document.getElementById('canvas').getContext('2d');
			var i=null//计时器
		    var x=0;
		    t.strokeStyle ="#333333";    
			   
		    t.beginPath();
		    t.rect(30, 30, 600, 250);
		    t.stroke();//车身的长方形
					
			t.beginPath();
		    t.arc(478, 278, 69, 0, Math.PI*2);
		    t.stroke();//右边的车轮
			  
		    t.beginPath();
		    t.arc(168, 278, 69, 0, Math.PI*2);
		    t.stroke();//左边的车轮
			  
			t.beginPath();
			t.rect(448, 68, 119, 119);
			t.stroke();//车头的车窗
		    
			t.beginPath();
			t.rect(248, 68, 79, 79);
			t.stroke();
			
			t.beginPath();
			t.rect(148, 68, 79, 79);
			t.stroke();
			
			t.beginPath();
			t.rect(48, 68, 79, 79);
			t.stroke();
		
		   function Go(){
			  window.clearInterval(i);//关闭定时器i
			  
		// 设置计时器i
		i=setInterval(function(){ 
		    t.clearRect(0,0,1500,400);//清除之前在画布画的内容
		    t.beginPath();
		    t.rect(30+x, 30, 600, 250);
		    t.stroke();
		 
			t.beginPath();
			t.rect(448+x, 68, 119, 119);
			t.stroke();
		 
		    t.beginPath();
		    t.arc(168+x, 278, 69, 0, Math.PI*2);
		    t.stroke();
		
		    t.beginPath();
		    t.arc(478+x, 278, 69, 0, Math.PI*2);
		    t.stroke();
			
			t.beginPath();
			t.rect(248+x, 68, 79, 79);
			t.stroke();
			
			t.beginPath();
			t.rect(148+x, 68, 79, 79);
			t.stroke();
			
			t.beginPath();
			t.rect(48+x, 68, 79, 79);
			t.stroke();
			
			x+=15;//每次x+15
					
		 },30) //30毫秒执行一次
		   }
	
	</script>
</html>