Canvas博物館

前書き

この記事は，SLP KBIT Advent Calendar 2022 の9日目の記事です。

adventar.org

これは、ひろゆきに「それって、あなたの感想ですよね」と言われた話です。 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)

終わりに

みなさん、モテ男になれましたか？