Javascript 我的正弦波代码的相位控制有什么问题？

我已经创建了一个正弦波绘图web应用程序。这是我的密码：

const canvas=document.getElementById（“canvas”），
振幅滑块=document.getElementById（“振幅控制”），
波长滑块=document.getElementById（“波长控制”），
phase\u slider=document.getElementById（“phase\u控件”），
振幅输出=document.getElementById（“振幅值”），
波长输出=document.getElementById（“波长值”），
阶段输出=document.getElementById（“阶段值”），
弧度系数=Math.PI/180；
变量宽度，
高度，
中景，
上下文
振幅=20，
波长=0，
相位=0；
函数init（）{
宽度=window.innerWidth-4；//为边框排除4个像素
高度=窗内高度-4；
画布宽度=宽度；
canvas.height=高度/2；
canvas_middle=高度/4；
context=canvas.getContext（“2d”）；
}
函数绘图（）{
clearRect（0，0，宽度，高度）；
context.beginPath（）；
var ampl=振幅/100*canvas_中间；
moveTo（0，canvas_middle+ampl*Math.sin（弧度因子*相位*Math.pow（2，波长））；
对于（i=1；i{
init（）；
draw（）；
});
振幅_滑块。addEventListener（“输入”，（）=>{
振幅=振幅值；
振幅_output.innerHTML=振幅；
draw（）；
});
波长滑块。addEventListener（“输入”，（）=>{
波长=波长值；
波长_output.innerHTML=Math.pow（2，波长）.toFixed（2）；
draw（）；
});
相位滑块。addEventListener（“输入”，（）=>{
相位=相位值；
phase_output.innerHTML=phase+“°；（“+（弧度系数*相位）.toFixed（3）+“rad）”；
draw（）；
});
*{
框大小：边框框；
}
html，
身体{
身高：100%；
填充：0；
保证金：0；
}
帆布{
边框：2倍纯绿；
宽度：100%；
身高：50%；
}
输入{
宽度：100%；
边缘顶部：2米；
填充：0 10px 0 10px；
}

振幅20

波长4.00

相位0°；（0.000 rad）
在Temmu评论的帮助下，我解决了我的问题。在我的代码中，问题是相位滑动条.value返回的值是
string
类型。使用该
字符串
类型值进行计算是导致问题的原因

我只需要使用
parseInt（）
方法或在变量前面加一个
+
符号，将相位滑块.value转换为一个数字

以下是我的代码的更正版本：


const canvas=document.getElementById（“canvas”），
振幅滑块=document.getElementById（“振幅控制”），
波长滑块=document.getElementById（“波长控制”），
phase\u slider=document.getElementById（“phase\u控件”），
振幅输出=document.getElementById（“振幅值”），
波长输出=document.getElementById（“波长值”），
阶段输出=document.getElementById（“阶段值”），
弧度系数=Math.PI/180；
变量宽度，
高度，
中景，
上下文
振幅=20，
波长=0，
相位=0；
函数init（）{
宽度=window.innerWidth-4；//为边框排除4个像素
高度=窗内高度-4；
画布宽度=宽度；
canvas.height=高度/2；
canvas_middle=高度/4；
context=canvas.getContext（“2d”）；
}
函数绘图（）{
clearRect（0，0，宽度，高度）；
context.beginPath（）；
var ampl=振幅/100*canvas_中间；
moveTo（0，canvas_middle+ampl*Math.sin（弧度因子*相位*Math.pow（2，波长））；
对于（i=1；i{
init（）；
draw（）；
});
振幅_滑块。addEventListener（“输入”，（）=>{
振幅=振幅值；
振幅_output.innerHTML=振幅；
draw（）；
});
波长滑块。addEventListener（“输入”，（）=>{
波长=波长值；
波长_output.innerHTML=Math.pow（2，波长）.toFixed（2）；
draw（）；
});
相位滑块。addEventListener（“输入”，（）=>{
phase=parseInt（phase_slider.value）；//这是正确的行
phase_output.innerHTML=phase+“°；（“+（弧度系数*相位）.toFixed（3）+“rad）”；
draw（）；
});
*{
框大小：边框框；
}
html，
身体{
身高：100%；
填充：0；
保证金：0；
}
帆布{
边框：2倍纯绿；
宽度：100%；
身高：50%；
}
输入{
宽度：100%；
边缘顶部：2米；
填充：0 10px 0 10px；
}

振幅20

波长4.00

相位0°；（0.000 rad）
我几乎投了反对票，而职训局在这里是一个复制品。请注意你的题目。有关更多信息，请参阅。标题是潜在的回答者会看到的第一件事，如果你的标题不有趣，他们就不会读剩下的。所以让它计数：这里的输入值是一个字符串。您需要
phase=+phase\u slider.value
，即在做数学之前将相位转换为数字（
i+相位
）。哦，是的，你说得对，我只需要将
phase\u滑块的值
更改为一个数字，它工作得很好。请将此作为答案发布，以便对其他人也有帮助。