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

Question

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

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

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

Answer 1

绘图

有两种使用 javascript“绘制”任意形状的好方法。

• 第一个选项是 HTML canvas 元素。与艺术家 Canvas 一样，html Canvas 提供了一个区域，您可以在其中使用 javascript 绘制任意形状、线条等。
• 第二个选项是 SVG 绘图。 SVG 是一种类似于 HTML 的语言，它允许您定义线条、形状等。有一些很好的库可以使用 javascript 绘制 SVG 代码(例如 raphael.js)

所以这两个选项都允许您使用 javascript 在屏幕上绘制。我建议使用 SVG，因为它使您能够更有效地修改已绘制的元素、将事件处理程序附加到绘图中的元素等。

动画

一旦您具备了绘画能力，您就需要为您的绘画制作动画。简短的回答是您想使用 requestAnimationFrame 告诉浏览器您希望定期调用一个函数来绘制动画帧。每次执行该函数时，您都会相应地更新绘图。