👊🏾 🌂 😣 キャンバスを使用した三角法の驚異 🧑🏽‍🤝‍🧑🏽 🍀 🗜️

長い間、私はHTML5キャンバスの学習を開始したかったのですが、ついにそれを取り上げました。私が最初に試したのは、「疑似3D」の標準線を使用してさまざまな形状を表示することでした。むかしむかし、winampプラグインで非常に興味深い方法を探し出し、自分で実装することにしました。 2002年にC ++でこれを行いましたが、今はこの奇跡をHTMLとJavaScriptに移植するときです。

Canvasに関連付けられた関数をより簡単に使用するためにjCanvasScriptシェルをすぐに使用し、IE8で結果をサポートするためにexplorercanvasを使用することにしました。

驚きはほとんど最初から始まった。キャンバスをフルスクリーン（より正確には、ブラウザーウィンドウ全体）に引き伸ばしたいと思っていましたが、キャンバスのサイズはピクセル単位でのみ設定され、canvasタグの挿入からすでに注意が必要でした。厳密に言えば、パーセンテージを設定できますが、内部のイメージは引き伸ばされます。これが私がこのようなことをしなければならなかったことです。

$(window).load(function(){ $("<canvas></canvas>").attr({ 'width': $('body').width(), 'height': $('body').height(), 'id': idCanvas }).appendTo("body"); });

私は、異なる平面で回転する螺旋から始めました。なぜならこれを以前にC ++で行った後、「ワーク」を取り、そのロジックをJavaScriptに変換しました。関数のグラフを表示するには、各ポイントのX座標とY座標を計算する関数を入力する必要があります。回転を表示するには、平面の傾斜角が各フレームに依存する変数を変更する関数が必要です。

初期化コード：

 var settings = { n : 500, // num of points tx: 0, ty: 0, tz: 0, x1: 0, y1: 0, z1: 0, dtx: 1, dty: 1, dtz: 1, dx: 2, dy: 2, dz: 2, clCol: 9, dir: 1 }

フレームからフレームへ実行されるコード：

 tx += 0.01*dtx; ty += 0.01*dty; tz += 0.01*dtz;

各フレームで実行されるコード：

 x1 = cos(tx+dx*i*PI)*i; y1 = sin(ty-dy*i*PI)*i; z1 = sin(tz-dz*i*PI)*i; x = x1/(2+z1/2); y = y1/(2+z1/2);

変数iは0からnまで変化します。変数xとyは0から1まで変化します-これは、画面の幅と高さに応じて画面の座標に変換するのに便利です。

1つのHTMLファイルをスパイラルで記述したので、次のように他の形状を試すことにしました。図ごとに1つのファイルを作成するのは便利ではありません。コードの組み込みエディター（初期化、フレーム、ポイント、ミキシング変数）を使用してHTMLファイルを作成しました。コードの一部はevalを使用して挿入され、スコープが拡張されているため、Mathオブジェクトの名前を記述せずに三角関数を使用できます。

もちろん、エディターが作成されたとき、何が行われたかを保存して読み込む必要が生じました。こちらの動作をご覧ください。三角関数の振る舞いを研究するのに役立つと思います。

コードを強調するために使用されるCodeMirror

キャンバスを使用した三角法の驚異

More articles: