canvas 小球碰撞的效果

1、 用canvas实现小球在局部的空间内，不停的滚动效果，代码如下：

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>小球碰撞</title>
		</head>
		<style type="text/css">
			#myCanvas {
				border: 1px solid #000000;
			}
		</style>
		<body>
			<canvas id="myCanvas" width="500" height="500">浏览器不支持Canvas</canvas>
		</body>
	</html>


	<script type="text/javascript">
		var car = document.getElementById("myCanvas");

		var ctx = car.getContext("2d");
		var h = 500;
		var w = 500;

		var x = 100;
		var y = 100;
		var r = 20;

		//水平方向的速度
		var speedX = 4;

		//垂直方向的速度
		var speedY = 3;

		var Interval = setInterval(() => {

			//改变X的坐标
			x = x + speedX;

			//当x的位置加上半径大于等于总宽度的时候，代表小球刚好与右边边框相碰
			//当x的位置加上半径小于等于0的时候，代表小球刚好与左边边框相碰
			if (r + x >= w || x - r <= 0) {
				//当判断成立时，代表速度要取相反值，小球才会进行反方向运动
				speedX = -speedX;
			}

			//改变Y的坐标
			y = y + speedY;

			//当Y的位置加上半径大于等于总高度的时候，代表小球刚好与底边边框相碰
			//当Y的位置加上半径小于等于0的时候，代表小球刚好与上边边框相碰
			if (r + y >= h || y - r <= 0) {
				//当判断成立时，代表速度要取相反值，小球才会进行反方向运动
				speedY = -speedY;
			}

			//清空内容
			ctx.clearRect(0, 0, w, h);

			motion(x, y, randomHexColor());
		}, 10)



		function motion(x, y, color) {
			ctx.beginPath();
			ctx.arc(x, y, r, 0, Math.PI * 2);

			ctx.fillStyle = color;
			ctx.fill();

			ctx.strokeStyle = color;
			ctx.stroke();
			ctx.closePath();
		}


		//随机生成十六进制颜色
		function randomHexColor() {
			//生成ffffff以内16进制数
			var hex = Math.floor(Math.random() * 16777216).toString(16);
			//while循环判断hex位数，少于6位前面加0凑够6位
			while (hex.length < 6) {
				hex = '0' + hex;
			}
			//返回‘#'开头16进制颜色
			return '#' + hex;
		}
	</script>

　　

posted @ 2021-07-07 11:33  凌晨的粥  阅读(344)  评论(0)    收藏  举报