単位円を横断しながら正弦波をプロットしたい。教育目的で使用したい。私が持ちたいプロットは、以下のものに似ています：
また、x 軸の目盛りラベルに π/2、π、3π/2、2π を含めたい。それは私が言いたいいくつかの数学をサポートするかもしれません.
Javascriptを使用して、このような単位円と対応するxyプロットをプロットするにはどうすればよいですか? どのライブラリを使用すればよいですか? 出発点を教えていただけますか？
3433 次
3 に答える
4
まず、ポイントを使用して、ある時点で何かを表示したいことに注意してくださいt。つまり、x と y は時間の関数またはパラメトリック方程式です。
スケール係数を無視すると、円は次のようになります
x(t) = cos(t)
y(t) = sin(t)
そしてあなたの波は
x(t) = t
y(t) = sin(t)
t範囲は 0 から 2pi です。Javascript は、Mathオブジェクトを介して三角関数演算をサポートします。
html5 キャンバスは、以前に描画または消去されたものをピクセルベースで表現したものです。つまり、何かが描画されてピクセルが変更されたかどうかに関係なく、描画された形状を記憶していません。
html5 キャンバスの便利な点の 1 つは、一連のステートメントを定義して特定のオブジェクトを描画できることです。その後、そのオブジェクトを特定の位置、縮尺、および/または回転または反射で描画する必要がある場合は、そのオブジェクトを保存できます。キャンバスの状態を (API によって提供される) スタックに移動し、変換を設定し、オブジェクトを描画し、スタックから戻って他に必要なことを続けます。
覚えておくべきことの 1 つは、(変換なしで) キャンバス座標 (0,0) が左上隅から始まり、y 座標が下に向かって増加するのに対し、デカルト座標系では y 座標が上に向かって増加することです。
テキスト ラベルを描画するために、キャンバス API は、ロードされた任意のフォント (たとえば、Web フォント ファウンダリーから) またはシステム上にある複数のきちんとした効果を持つフォントで描画することを許可します。
これは「教育目的」で行われるとおっしゃいましたが、その目的が学生が数学の概念について学ぶためなのか、それともプログラミングの概念を学ぶためなのかは私にはわかりません。後者の場合、html5 キャンバスを直接使用する例を示すのは少し多すぎるかもしれません (行き詰まったときにのみ要求される支援を使用して、自分で物事を発見する方がよい場合が多い)。d3.js を使用するのは、もちろん、d3.js について学びたい場合を除きます。最初に html5 キャンバスの基本的な操作を練習することをお勧めします。 前者なら、まぁd3.jsを活用するのもいいかも。結局、Jason Davies Animated Bézier Curvesに相当するもので遊ぶのは楽しいかもしれません正弦波や円などに関連しています。
編集：おっと、私はどういうわけかd3がキャンバスを使用していることに気付きましたが、再確認した今では明らかによりsvgベースです。Html5 キャンバスの「基本」は必ずしも d3.js に関連しているとは限らないため、その線を打ちました。
于 2012-12-19T20:29:39.163 に答える
4
描く
JavaScript を使用して任意の形状を「描画」するには、2 つの良い方法があります。
- 最初のオプションは、HTML キャンバス要素です。アーティスト キャンバスと同様に、html キャンバスは、javascript を使用して任意の形状や線などを描画できる領域を提供します。
- 2 番目のオプションは SVG 描画です。SVG は HTML に似た言語で、線や形状などを定義できます。JavaScript を使用して SVG コードを描画するための優れたライブラリがあります (例: raphael.js)。
したがって、どちらのオプションでも、javascript を使用して画面に描画できます。SVG を使用することをお勧めします。これにより、既に描画した要素を変更したり、描画内の要素にイベント ハンドラーをアタッチしたりできるようになります。
アニメーション
絵を描くことができるようになったら、絵をアニメーション化する必要があります。簡単な答えはrequestAnimationFrame、アニメーションのフレームを描画するために定期的に呼び出される関数をブラウザーに伝えるために使用することです。その関数が実行されるたびに、図面を適切に更新します。
于 2012-12-19T20:30:37.550 に答える
1
Jason Davies が D3 JS と SVG を使用して完成させたこのアニメーションは、完成したサンプルのように見えます: http://www.jasondavies.com/animated-trig/
于 2013-01-23T23:17:28.293 に答える