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

Question

我想在遍历单位圆时绘制正弦波。我想用它来教育目的。我想有情节类似下面的一个：

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

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

Answer 1

首先，注意用点你是想在一段时间t显示的东西。也就是说，x和y是时间函数或参数方程。

忽略规模的因素，你的圈子会

x(t) = cos(t) 
y(t) = sin(t) 

和你的波将

x(t) = t 
y(t) = sin(t) 

凡t范围从0到二皮。 Javascript支持通过Math对象进行三角函数操作。

HTML5的Canvas是什么先前已绘制在或从中删除基于像素的表示。也就是说，它不记得绘制的任何形状，要么是绘制的东西，要么是像素被改变，或者不是。

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

有一点需要记住的是（无变换）画布坐标（0,0）从左上角开始，y坐标增加下降，而笛卡尔坐标系的y坐标增加向上。

绘制文本标签，画布API允许用于与加载的任何字体工整多字体的效果图（说一些Web字体foundary）或您的系统上。

您刚才提到，这是对“教育目的”要做，但我不清楚如果这些目的是让学生了解一些数学概念，还是你学习一些编程的概念。如果是后者，我担心直接使用html5画布给你一个例子可能会有点太多（通常只需要在你被卡住时请求的帮助下发现你自己的东西通常会更好），并且使用d3.js可能是有点矫枉过正，除非你想了解d3.js。 我仍然会首先推荐一些基本操作HTML5画布的练习。 如果是前者，那么利用d3.js可能会相当不错。毕竟，玩与Jason Davies Animated Bézier Curves相关的东西可能很有趣，它与正弦波和圆圈或类似的东西有关。

编辑：哎呀，我不知怎么钻进记住，D3使用的帆布，但它是基于现在显然更SVG，我已经在它复查。 Html5画布“基本面”不一定与d3相关。js，所以我打了那条线。

Answer 2

图

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

• 第一个选项是HTML canvas元素。就像艺术家画布一样，HTML画布提供了一个可以使用JavaScript绘制任意形状，线条等的区域。
• 第二个选项是SVG绘图。 SVG是类似于HTML语言，它允许您定义线条，形状等有绘制出使用JavaScript SVG代码（例如raphael.js）好的库

所以这两个选项让你绘制到屏幕与JavaScript。我会建议使用SVG，因为它给你更多的修改您已经绘制的元素能力强，附加的事件处理元素在绘图中，等

动画

一旦你画的能力，你需要使您的绘图动画。简短的回答是，您想使用​​来告诉浏览器您想要定期调用一个函数来绘制动画帧。每次执行该功能时，都会适当地更新绘图。

Answer 3

这个动画使用D3 JS和SVG似乎是你所追求的一个完成的样品由杰森·戴维斯完成： http://www.jasondavies.com/animated-trig/