Javascript 画布正弦曲线绘制

我试图在画布中创建-360（最左侧）到360（最右侧）之间的正弦曲线

就像我的学生时代一样，我创建了x轴和y轴，并在-360到360之间运行循环，以在变化的x上找到y。但我不知道如何在-1到1的范围内划分Y坐标值

1） 如何将坐标沿x轴和y轴以及中间的中心平移为（0,0）

2） 如何在-2pi到+2pi之间按8个块的比例分割x轴

var canvas=document.getElementById（“我的画布”）；
var context=canvas.getContext（“2d”）；
var差距=10；
对于（设j=0；j正弦波图的变化：


我只是把x轴和y轴修改成我写的波函数，以匹配波开始产生的原点

在生成正弦波时，您需要递增地更改y轴的值，因为您没有这样做，而是获得了一条直线。我使用了以下表达式
y=180-Math.sin（counter）*120；
其中计数器的值正在递增
（要获得增加值，可以取任何PI/值，但我们为每个坐标使用了PI/18小增量，正如您在增加变量中看到的那样）
呈指数非线性，然后再次递减，我们让for循环运行2*PI而不是PI，以获得两个完整的wave实例，一个在原点之前，一个在原点之后

除此之外，您还需要在递增后
移动到循环中的x和y值，以利用笔划并连接到以前的坐标，而不是在开始时



var canvas=document.getElementById（“我的画布”）；
var context=canvas.getContext（“2d”）；
var差距=10；
对于（假设j=0；j对于（i=0；我能解释一下Sumeet的解决方案吗？@DouwedeHaan我解释过了。@Sumeet（要获得增加值，你可以取任何PI/值，但我们对每个坐标使用了PI/18小增量，正如你在增加变量中看到的那样）如突出显示的，如果你看到它计算为π/18，现在如果你把这个值改为90/180*Math.PI/3，它等于π/6，你会有更多的波紧凑地生成，因为计数器利用了这个增量，但是我们的正弦波是守恒的，它只是你的波在x轴上应该有多大的空间的一个媒介，试试to调整一下。@Sumeet哦，还有一件事要注意，这些增量，PI/value，确保值正确地除以180，因为PI是180度，这就是增量坐标如何被等分的，如果你有一些不正确的值，它不除以PI，那么图将乱成一团。@Sumeet抱歉，我没有做任何sigma.js，我也没有知道语法确切指的是什么。但是有很多参考资料可以用来学习canvas或任何东西，但是对于waves和所有的东西，我想说的是复习一些基本的三角函数，了解它们的值是如何变化或增加的。这将帮助你理解任何东西，一旦你理解了它们的语法，beca使用语义更重要。