第七讲：HTML5中的canvas两个小球完全弹性碰撞

最新推荐文章于 2022-04-08 09:07:37 发布

我有一个小毛驴

最新推荐文章于 2022-04-08 09:07:37 发布

阅读量5.4k

点赞数

分类专栏： html+css 文章标签： html5 canvas 小球碰撞完全非弹性

本文链接：https://blog.csdn.net/liumingm_music/article/details/29365843

版权

本文详细讲解了如何使用HTML5的canvas元素，实现两个小球进行完全弹性碰撞的效果。通过设置运动轨迹和碰撞检测算法，使得小球在碰撞后遵循动量守恒和能量守恒的物理原理，保持运动状态的连续性和真实性。

摘要由CSDN通过智能技术生成

<html>
	<head>
		<title>小球之间的碰撞(完全弹性碰撞)</title>
		<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
	</head>
	
	<body>
		<canvas id="mc" width="1200px" height="600px">
		</canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('mc');
			var cxt = canvas.getContext('2d');
			//设置画布背景颜色
			cxt.fillStyle = "#030303";
   	 	cxt.fillRect(0, 0, canvas.width, canvas.height);
			var cyc = 20;
			var balls = [];
			//定义一个向x轴正前方运动
			var ball_1 = {
				x:100,
				y:550,
				r:50,
				vx:500,
				vy:0
			};
			//定义一个向x轴反方向运动
			var ball_2 = {
				x:1000,
				y:550,
				r:50,
				vx:-400,
				vy:0
			};
			balls.push(ball_1);
			balls.push(ball_2);
			cxt.fillStyle = "#030303";
			cxt.fillRect(0,0,ca