html怎么添加小球自由落体运动下落轨迹

最新推荐文章于 2023-11-09 15:50:58 发布

weixin_58816567

最新推荐文章于 2023-11-09 15:50:58 发布

阅读量176

点赞数

文章标签： css html css3 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_58816567/article/details/129457996

版权

这个代码中怎么添加小球自由落体运动的下落轨迹：

<!DOCTYPE html>

<html>

<head>

<title>自由落体运动仿真</title>

<style>

body {

background-color: #ffffcc; /* 淡黄色的颜色代码 */

}

#mycanvas {

display: block;

margin: auto;

background-color: white;

}

h1 {

font-size: 32px; /* 设置标题字体大小 */

font-weight: normal; /* 取消标题的粗体样式 */

margin-top: 20px; /* 设置标题距离顶部的距离 */

text-align: center;

}

.module {

margin-top: -200px;

}

label {

display: block;

margin-bottom: 10px;

}

input[type="number"] {

width: 50px;

margin-right: 10px;

}

</style>

</head>

<body>

<h1>基于HTML5小球自由落体运动仿真功能与实现</h1>

</div>

</div>

</div>

// 获取画布元素和画布上下文对象

var canvas = document.getElementById("mycanvas");

var context = canvas.getContext("2d");

var animationId = null; // 动画帧编号

// 定义物理参数

var gravity = 9.8; // 重力加速度

var airResistance = 0.1; // 空气阻力系数

// 定义小球的初始状态

var x = canvas.width/2;

var y = 0;

var radius = 20;

var speed = 0;

// 获取弹力的input元素

var elasticityInput = document.getElementById("elasticity");

var elasticity = parseFloat(elasticityInput.value);

// 获取速度的input元素

var elasticityInput = document.getElementById("elasticity");

var elasticity = parseFloat(elasticityInput.value);

// 定义允许的最小和最大弹力值

var minElasticity = parseFloat(elasticityInput.getAttribute("min"));

var maxElasticity = parseFloat(elasticityInput.getAttribute("max"));

// 更新弹力值的函数

function updateElasticity() {

// 获取当前输入框的值并转换为浮点数

var elasticityValue = parseFloat(elasticityInput.value);

// 如果值超出了允许的范围，则将其设置为最小或最大允许值

if (elasticityValue < minElasticity) {

elasticityValue = minElasticity;

} else if (elasticityValue > maxElasticity) {

elasticityValue = maxElasticity;

}

// 更新弹力值

elasticity = elasticityValue;

}

// 添加弹力值输入框的change事件监听器

elasticityInput.addEventListener("change", updateElasticity);

// 确保弹力值在页面加载时被初始化

updateElasticity();

function draw() {

// 清空画布

context.clearRect(0, 0, canvas.width, canvas.height);

// 绘制小球

context.beginPath();

context.arc(x, y, radius, 0, Math.PI*2);

context.fillStyle = "red";

context.fill();

context.closePath();

// 绘制小球速度

context.font = "16px Arial";

context.fillStyle = "black";

context.fillText("速度：" + speed.toFixed(2) + " m/s", canvas.width - 120, 30);

// 更新小球位置和速度

speed += gravity - airResistance * speed;

y += speed;

// 边界检测，如果小球碰到底部则反弹

if (y + radius > canvas.height) {

y = canvas.height - radius;

speed = -elasticity* speed;

elasticity = parseFloat(elasticityInput.value);

elasticity = parseFloat(elasticityInput.value); // 重新读取弹力值

}

// 循环调用自身

animationId = requestAnimationFrame(draw);

}

// 开始按键事件处理程序

var startButton = document.getElementById("startButton");

startButton.onclick = function() {

// 重新设置小球初始状态

x = canvas.width/2;

y = 0;

speed = 0;

// 启动动画循环

animationId = requestAnimationFrame(draw);

};

// 停止按键事件处理程序

var stopButton = document.getElementById("stopButton");

stopButton.onclick = function() {

if (animationId !== null) {

cancelAnimationFrame(animationId);

animationId = null;

}

};

// 复位按键事件处理程序

var resetButton = document.getElementById("resetButton");

resetButton.onclick = function() {

// 停止动画循环

if (animationId !== null) {

cancelAnimationFrame(animationId);

animationId = null;

}

// 将小球返回到初始位置

x = canvas.width/2;

y = 0;

speed = 0;

// 清空画布

context.clearRect(0, 0, canvas.width, canvas.height);

// 绘制小球

context.beginPath();

context.arc(x, y, radius, 0, Math.PI*2);

context.fillStyle = "red";

context.fill();

context.closePath();

};

</script>

</body>

</html>

weixin_58816567

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html怎么添加小球自由落体运动下落轨迹

html怎么添加小球自由落体运动下落轨迹
复制链接

扫一扫

html怎么添加小球自由落体运动下落轨迹

“相关推荐”对你有帮助么？