javascript - スライダーでコントロールできるダイナミックカーブの描き方

Question

ユーザーは実行時に動的な正弦曲線を制御できますか? たとえば、ユーザーがスライダーを使用して正弦曲線を制御する場合、値が変更された時点から曲線が変化する必要があります (目に見える曲線全体ではありません)。

Answer 1

それはすべてあなたの視覚的表現に依存します。

使用:

clearRect(0, 0, canvas.width, canvas.height)

キャンバス全体がクリアされ、以前に描画された正弦波に関する情報を維持する必要があります。

次のように使用できます。

clearRect(theta, 0, period, canvas.height)

IE ユーザーに制御させたいキャンバスのセクションのみを再描画してから、修正した正弦波を再描画します。

ここにフィドルがあります：

http://jsfiddle.net/UkR4G/1/

ご覧のとおり、曲線の一部のみを消去して、このセクションで別の周波数の波を自由に再描画できるようにします。

これをどのように行うかはあなた次第です。