抛物体运动模拟器——速度角度效果反馈

前言

今天在豆包的AI应用上看到了一个抛物线的功能，其实不仅仅是抛物线，其它的效果也是可以的，我根据基础的示例做了个效果，效果再下图中能看到，使用的是纯HTML+Canvas来完成的，效果还不错，我们用来学习数学和物理都还不错，那么接下来我们来具体看看吧。

目录

前言

在线实操效果

抛物线模型特点

对照表

完整代码块

---

在线实操效果

运行可以直接看到效果。

抛物线模型特点

直观的用户界面：采用现代卡片式设计，清晰分离控制面板和模拟区域，提供舒适的视觉体验。

完整的物理模拟：

支持调整初速度 (5-50 m/s) 和发射角度 (10-80 度)

实时计算并显示最大高度、飞行时间和水平距离

模拟真实的重力加速度效果

丰富的视觉元素：

清晰的坐标轴和网格线

平滑的轨迹绘制

物体落地时的爆炸动画效果

渐变色彩和阴影效果增强深度感

轨迹方程展示：

显示标准参数方程

实时计算并更新当前轨迹方程

对照表

从初速度10m/s，角度10°开始递增变化，下方是整个对照表。

初速度 (m/s)	角度 (°)	最大高度 (m)	飞行时间 (s)	水平距离 (m)	轨迹特点
10	10	0.15	0.35	3.42	低而短的轨迹，几乎是水平飞行
10	15	0.34	0.53	5.00	略微上扬的短轨迹
10	20	0.60	0.70	6.43	中等高度的短轨迹
10	25	0.92	0.86	7.66	明显的抛物线形状，中等距离
10	30	1.28	1.02	8.84	典型的抛物线轨迹，距离适中
10	35	1.68	1.18	9.92	高度增加，距离接近最大值
10	40	2.11	1.32	10.88	接近 45 度角的最大距离
10	45	2.55	1.45	11.70	最大水平距离（理论上 45 度角时最大）
10	50	2.99	1.57	12.35	高度继续增加，距离略有下降
10	55	3.41	1.68	12.81	高度增加明显，距离开始减少
10	60	3.83	1.77	13.06	高度高但距离开始减少
10	65	4.21	1.84	13.07	更高的轨迹，水平距离几乎不变
10	70	4.55	1.89	12.82	垂直方向分量更大，水平距离减少
10	75	4.83	1.92	12.29	几乎是垂直向上，水平距离较小
10	80	5.03	1.93	11.46	接近垂直向上，水平距离最小
20	10	0.61	0.70	13.89	低而远的轨迹，水平分量大
20	15	1.38	1.07	20.00	略微上扬的远距离轨迹
20	20	2.42	1.41	25.71	中等高度的远距离轨迹
20	25	3.71	1.73	30.65	明显的抛物线形状，远距离
20	30	5.14	2.05	35.36	典型的抛物线轨迹，远距离
20	35	6.73	2.37	39.68	高度增加，距离接近最大值
20	40	8.46	2.65	43.52	接近 45 度角的最大距离
20	45	10.20	2.90	46.80	最大水平距离（理论上 45 度角时最大）
20	50	11.95	3.15	49.41	高度继续增加，距离略有下降
20	55	13.65	3.36	51.23	高度增加明显，距离开始减少
20	60	15.30	3.55	52.25	高度高但距离开始减少
20	65	16.85	3.69	52.29	更高的轨迹，水平距离几乎不变
20	70	18.20	3.79	51.27	垂直方向分量更大，水平距离减少
20	75	19.33	3.85	49.17	几乎是垂直向上，水平距离较小