Canvas博物館
前書き
この記事は,SLP KBIT Advent Calendar 2022 の9日目の記事です。
これは、ひろゆきに「それって、あなたの感想ですよね」と言われた話です。 JavaScriptと言えば、Canvasだと思うのです。 Canvasを制する者は、JavaScriptを制し、オシャレになり、モテ男になるという言い伝えも存在します。
今回は、Cavas博物館というWebアプリケーションを作成し、みなさんと一緒にモテ男になろうと思います。
目次
全体の概要
- ディレクトリ構図
. ├── app.py ├── static │ ├── css │ │ └── style.css │ └── js │ ├── libs │ │ └── perlin.js │ └── museum.js └── templates └── museum.html
当Webアプリケーションは、始めのページに作品名が書かれたボタンを複数用意しています。好みの作品名のボタンをクリックすることでモーダル画面が登場し、Canvasで作成したアートを閲覧できる仕組みになっています。今回は、実際のアートの作成方法を省略し、アート表示までの流れを記載します。アートのコードが気になる方はこちらのgithubに公開してますので、ご確認を! また、今回作成するイメージはここに載せておきます。
モーダル画面
はじめにモーダル画面の処理を行う上でモーダル画面を開くボタンと閉じるボタン、もーだつ画面の情報を取得する必要があります。
const buttonOpen = document.getElementById(modalOpenId); const modal = document.getElementById(easyModal); const buttonClose = document.getElementsByClassName(modalCloseId)[0];
次に開くボタンを押すとモーダル画面が登場する処理を追加します。 モーふぁる画面は以下のCSSの設定が施されておます。
.modal{ display: none; position: fixed; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); }
display
がnone
になっているため、表示されていません。
そのため、display
をblock
に変更することで画面上に表示されます。
そこで、特定のボタンをクリックした際にcssのdisplay
の設定が変更するように処理すれば、モーダル画面が登場します。
buttonOpen.addEventListener('click', modalOpen); function modalOpen() { modal.style.display = 'block'; }
一方、モーダル画面を閉じる際は、cssのdisplay
の設定をnone
に変更することでモーダル画面を消すことができます。
buttonClose.addEventListener('click', modalClose); function modalClose() { modal.style.display = 'none'; }
Canvasの設定
続いて、Canvasの設定方法の説明です。設定と言っても、JavaScriptでCanvasに描画する準備方法を軽く記述したのみです。
私の場合は、以下のようなボタン配置にし、idを変更こうして複数のCanvasを作成しています。
<button id="rainbow-modalOpen" class="rainbow-button">rainbow</button> <div id="easyRainbowModal" class="modal"> <div class="modal-content"> <div class="rainbow-modal-header"> <h1>rainbow</h1> <span class="rainbow-modalClose">×</span> </div> <div class="modal-body"> <canvas id="rainbow" class="rainbow-canvas"></canvas> </div> </div> </div>
続いて、Canvasに描画するコンテキストを取得します。 まず初めにidを指定してCanvas要素を取得します。
const canvas = document.getElementById('rainbow');
続いて、コンテキストを取得します。今回は2次元でグラフィックを描画するため、引き数は2d
を指定します。3次元でグラフィックを描画する場合は引数にwebgl
を指定します。
const context = canvas.getContext('2d');
FlaskでローカルWebサーバーを構築
最後にルート設定だけして、ローカルサーバーを立てて終わりにします。ルートは@app.route("ルート",メソッド設定)
の書き方で設定可能です。ルート設定も含めたWebサーバーの構築は以下のコードで簡単に行えます。
from flask import Flask, render_template app = Flask(__name__) @app.route("/museum",methods=["GET"]) def museaum(): return render_template("museum.html") if __name__ == "__main__": app.run(debug=True)
終わりに
みなさん、モテ男になれましたか?