demo_canvas チュートリアル

このチュートリアルでは、ブラウザ用の Canvas デモのビルドと表示の方法、そして手を加えられるようにプログラムの構成を説明します。

クイックスタート

リポジトリのルートで：

just canvas-serve

http://localhost:8080 を開きます。ページには回転するトーラスが表示され、セレクタで “Dolly zoom” を選ぶとドリーズームのシーンに切り替わります。just を使わない場合は、moon build src/demo_canvas --target js を実行し、src/demo_canvas/index.html と _build/js/debug/build/demo_canvas/demo_canvas.js（demo.js に名前を変えて）を同じディレクトリにコピーし、任意の静的ファイルサーバで配信します。ブラウザは file:// のページから JavaScript モジュールを読み込みません。

よくある作業

プログラムを読む

src/demo_canvas/main.mbt は 3 つの部分からなります。

ある瞬間の @frontend.Scene を作るシーン関数 torus_scene(timestamp) と dolly_scene(frame)、そして ScientificCamera を使う対応する RenderView の関数。
シーンを選んで @canvas.render_scene を呼ぶ render_frame(context, timestamp, selected)。
キャンバスとセレクタを探し、選択を Ref に保持し、毎フレーム描画する requestAnimationFrame のループを始める main。

シーンを追加する

DemoKind 列挙型にコンストラクタを、index.html に新しい値の <option> を、demo_kind にその値を対応付ける分岐を、render_frame にそのシーンとビューを作る分岐を追加します。just canvas-build で再ビルドしてください。

キャンバスのサイズを変える

定数 WIDTH と HEIGHT は投影のビューポートとバックエンドの設定の両方を決めます。index.html の属性と一緒に変えてください。

さらに進んで

バックエンドの呼び出しは Canvas チュートリアルで単独に説明し、ターミナルデモと共通のドリーズームは demo の設計で導出しています。

よくある落とし穴

ファイルを直接開く。 ディレクトリは HTTP で配信してください。モジュールスクリプトは file:// からは読み込まれません。
古いビルド。 just canvas-serve は再ビルドしますが、手で起動したサーバは最後にコピーされたものを配信します。

次のステップ

ページの取り決めは demo_canvas API にあります。
時刻をシーンにどう対応付けるかは demo_canvas の設計で説明しています。
ベクター版の demo_gsap も試してみてください。