首页 > 代码库 > 我的项目5 计时器 定时器 JS实现图片运动

我的项目5 计时器 定时器 JS实现图片运动

2024-07-22 22:13:32   220人阅读

在一个HTML5项目中用到了定时器，就学习了一下，和大家分享一下经验

               需要用到一个方法：

       setInterval("ballMove()", 1000);

            意思是每秒执行ballMove()方法一次

             他能用到什么地方呢，这就需要小伙伴们发挥想象了。在这里我用它写了一个图片自由运到的例子

            

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ggggg</title>
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"">>
            那么我用Canvas绘制的图呢，我想描绘它所经过的路线
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="utf-8">
			//定时器
			setInterval("ballMove()", 10);
			 //定义全局变量
			 //小球坐标
			ballX = 0;
			ballY = 0;
			 //小球在x,y轴移动的方向
			directX = 1;
			directY = 1;
			 //小球移动
			function ballMove() {
				//小球移动
				ballX += 2 * directX;
				ballY += 1 * directY;
				var c = document.getElementById("mycanvas");
				var cxt = c.getContext("2d");
				cxt.fillStyle = "#FF0000";
				cxt.beginPath();
				cxt.arc(ballX, ballY, 2, 0, Math.PI * 2, true);
				cxt.closePath();
				cxt.fill();
				//判断转向
				//learInterval(i);
				if (ballX + 2 >= c.width|| ballX <= 0) { 
					directX = -directX;
				}
				if (ballY + 2 >= c.height|| ballY <= 0) {
					directY = -directY;
				}
			}
		</script>
	</head>

	<body>
		<canvas id="mycanvas" width="400" height="300" style="border: 1px solid red;"></canvas>
	</body>

</html>

大家可以试一下，挺有意思的。

           
我的项目5  计时器 定时器  JS实现图片运动


联系
我们