我遇到了一个问题，还没有找到答案。看到一些类似的问题，但仍然不太明白。我有这个弹丸轨迹模拟器，但是当我在输入场轨迹中输入新的角度或速度值时，轨迹不会改变。如何使其使用我输入的值而不是默认值？
<html>
<head>
</head>
<body>
<div id="wrap">
<canvas id="surface" width="800" height="400"></canvas>
<nav>
<label for="angle">Angle</label>
<input name="angle" type="text" id="angle" value="45" placeholder="angle" oninput="start()"/>
<label for="velocity">Speed</label>
<input type="text" name="velocity" id="vel" value="45" placeholder="velocity" oninput="start()"/>
<input type="reset" value="Launch" onclick="start()">
</nav>
<script type="text/javascript">
var b=document.getElementById('angle').value;
var o=document.getElementById('vel').value;
var pro = {
x:50,
y:380,
r:15,
v:o,
theta:b,
};
var canvas = document.getElementById('surface');
var ctx = canvas.getContext('2d');
var frameCount = 0;
var v0x = pro.v * Math.cos(pro.theta * Math.PI/180);
var v0y = pro.v * Math.sin(pro.theta * Math.PI/180);
var startX = pro.x;
var startY = pro.y;
var g = 9.8;
setInterval(function()
{
ctx.save();
ctx.fillStyle = "rgba(256, 256, 256, .3)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
if(pro.y<canvas.height - pro.r && pro.x < canvas.width - pro.r)
{
pro.y = startY - ( v0y * frameCount - (1/2 * g * Math.pow(frameCount,2)) );
pro.x = startX + v0x * frameCount;
}
ctx.save();
ctx.beginPath();
ctx.fillStyle = "rgba(200, 0, 0, 0.9)";
ctx.arc(pro.x,pro.y,pro.r,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
frameCount+=.1;
}, 1000 / 77);
function start()
{
pro.x = 50;
pro.y = 380;
pro.v = o;
pro.theta = b;
frameCount = 0;
v0x = pro.v * Math.cos(pro.theta * Math.PI/180);
v0y = pro.v * Math.sin(pro.theta * Math.PI/180);
}
</script>
</div>
</body>
</html>
简短的回答： 取代
var b=document.getElementById('angle').value;
var o=document.getElementById('vel').value;
跟
var b=document.getElementById('angle');
var o=document.getElementById('vel');
b和o与b.value和o.value
更长的答案： JavaScript 中有 2 种数据类型：原语和引用。当你写a=b时，如果b是基元类型(数字，字符串，布尔值，null或未定义)，你将得到b的精确副本，但如果b是引用类型(数组，函数或对象)，你的a将只是一个链接到与b相同的对象，修改一个将修改另一个。您可以将其视为购买书籍与购买在线课程的订阅。如果课程内容发生变化，您的图书将不会反映它，但如果您有指向它的链接，您将能够看到更新。var b=document.getElementById('angle').value;相当于买了一本书，而var b=document.getElementById('angle');会给你一个指向 DOM 对象的链接。
var b=document.getElementById('angle');
var o=document.getElementById('vel');
var pro = {
x:50,
y:380,
r:15,
v:o.value,
theta:b.value,
};
var canvas = document.getElementById('surface');
var ctx = canvas.getContext('2d');
var frameCount = 0;
var v0x = pro.v * Math.cos(pro.theta * Math.PI/180);
var v0y = pro.v * Math.sin(pro.theta * Math.PI/180);
var startX = pro.x;
var startY = pro.y;
var g = 9.8;
setInterval(function()
{
ctx.save();
ctx.fillStyle = "rgba(256, 256, 256, .3)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
if(pro.y<canvas.height - pro.r && pro.x < canvas.width - pro.r)
{
pro.y = startY - ( v0y * frameCount - (1/2 * g * Math.pow(frameCount,2)) );
pro.x = startX + v0x * frameCount;
}
ctx.save();
ctx.beginPath();
ctx.fillStyle = "rgba(200, 0, 0, 0.9)";
ctx.arc(pro.x,pro.y,pro.r,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
frameCount+=.1;
}, 1000 / 77);
function start()
{
pro.x = 50;
pro.y = 380;
pro.v = o.value;
pro.theta = b.value;
frameCount = 0;
v0x = pro.v * Math.cos(pro.theta * Math.PI/180);
v0y = pro.v * Math.sin(pro.theta * Math.PI/180);
}<canvas id="surface" width="800" height="400"></canvas>
<nav>
<label for="angle">Angle</label>
<input name="angle" type="text" id="angle" value="45" placeholder="angle" oninput="start()"/>
<label for="velocity">Speed</label>
<input type="text" name="velocity" id="vel" value="45" placeholder="velocity" oninput="start()"/>
<input type="reset" value="Launch" onclick="start()">
</nav>调用start()时，您不会重置变量的值b和o，因此它们将始终保持不变。
将这些贴在start()的开头：
b=parseFloat(document.getElementById('angle').value);
o=parseFloat(document.getElementById('vel').value);