使用Javascript在遍历单位圆时绘制正弦波

Question

我想在遍历单位圆时绘制正弦波.我想将它用于教育目的.我想要的情节类似于下面的情节:

此外,我希望x轴'刻度标签涉及π/ 2,π,3π/2,2π.它可能支持我想说的一些数学.

如何使用Javascript绘制这样的单位圆和相应的xy-plot？我应该使用哪个库？你能提供一个起点吗？

Answer 1

首先，请注意，对于这些点，您希望在某个时间显示一些内容t。也就是说，x 和 y 是时间或参数方程的函数。

\n\n

忽略比例因素，你的圆将是

\n\n

x(t) = cos(t)\ny(t) = sin(t)\n

\n\n

你的波浪将是

\n\n

x(t) = t\ny(t) = sin(t)\n

\n\n

其中t范围从 0 到 2pi。Javascript 通过对象支持三角运算Math。

\n\n

html5 画布是基于像素的表示，表示先前在其上绘制或擦除的内容。也就是说，它不记得绘制到它的任何形状，无论是否绘制了某些内容并且更改了像素。

\n\n

html5 canvas 的一个有用之处是您可以定义一组语句来绘制某个特定对象，然后如果您需要在某个特定位置、比例和/或旋转或反射处绘制该对象，您可以可以将画布的状态保存到堆栈（由 API 提供），设置变换，绘制对象，然后从堆栈恢复以继续执行其他需要执行的操作。

\n\n

要记住的一件事是（没有变换）画布坐标 (0,0) 从左上角开始，y 坐标向下增加，而笛卡尔坐标系的 y 坐标向上增加。

\n\n

要绘制文本标签，canvas api 确实允许使用加载的任何字体（例如来自某些 Web 字体基金会）或您的系统上的具有多种简洁效果的字体进行绘制。

\n\n

您提到这是为了“教育目的”，但我不清楚这些目的是为了让学生学习一些数学概念，还是让您学习一些编程概念。如果是后者，我担心直接使用 html5 canvas 给你一个例子可能有点太多了（最好是自己发现东西，只有在你遇到困难时才需要帮助）并使用d3.js 可能有点大材小用，当然，除非您想了解 d3.js。我仍然建议首先练习一些 html5 canvas 的基本操作。 如果是前者，那么使用 d3.js 可能会很好。毕竟，玩与 Jason Davies Animated B\xc3\xa9zier Curves等价的东西可能会很有趣，这些曲线与正弦波和圆或类似的东西相关。

\n\n

编辑：哎呀，我不知何故想到 d3 使用画布，但现在我已经重新检查过它，它显然更基于 svg。Html5 canvas“基础知识”不一定与 d3.js 相关，所以我划出了这条线。

\n