今更ながらcanvas使ってみたら楽しすぎて一日があっという間に過ぎた話
ふんばりフロントエンジニアの私ですが、やはりなぜフロントエンジニアが良かったかと言えば「目に見える！」からだと思っております。
実を言うと新卒で入った会社はゴリゴリのバックエンドで、研修の最中でも「見た目のことなんか二の次じゃ」感はあったんですよね。
しかし！「人は見た目が8割」とも言いますし、見た目はかなり重要な役割を担っていると思います。
そして今回はそんな「見た目」に重視した、コードを書けばすぐに反映されるとてもた楽しかった「canvas」について書いていきたいと思います。
canvasってなんぞ？
「canvasってなんぞ？」
という方はおそらく少ないとは思いますが、一応MDNからの引用を…
HTML5 で導入された
<canvas>HTML 要素は、JavaScript によるスクリプティングによって図形などを描画するために使用します。例えば、グラフを描く、写真を合成する、アニメーションを作成する、動画のリアルタイム加工やレンダリングに用いる事が出来ます。
うむ、わからない。
これだけ見て分かる人はきっと触ったことのある方でしょう。
ともあれ、「JavaScript」と一緒に使うHTML要素であることは分かりますよね。
では、簡単にcanvasの例をご紹介していきたいと思います。
はい、これが「ザ・シンプル」なcanvasの使い方です。
canvasとは、jsを見ても分かるようにまずcanvasの置いてあるDOM要素を取得し、そこからコンテクスト（描画範囲）を取得することがまず第一。
今回の例で言えば変数「ctx」がcanvasのキャンバス（描画範囲）となっているわけです。
あとはその描画範囲で、どのような図形を描画するのか、どのような色で塗るのか
、ということを決めてしまえばこのような図形を描くことができるようになります。
「え、こんな図形ならcssでやれよ…」
まあ私もそう思います…
しかし、canvasが楽しいのはここから！
canvasのコンテキストは自由にカスタマイズすることができます。
そのため、HTML上にカスタマイズできて自由に消したり書いたりできる画用紙を用意された気分になってしまいました…
ここで私、「なんとなく画面いっぱいに埋め尽くしたいなあ…」という謎の欲望が。
ということで作ってみたのがこんな感じのもの。
(練習用のものだったので余計なものも入っています、すみません…）
作ったものは上部のcreateボタンを押すと、ランダムで違う場所に違うサイズ、違う色の四角形を100個出す、というもの。
個人的にはcanvasというよりランダムにカラーコードを作る、という方法が「ああっ！」となりましたね。
意外と配色がいい感じにばらけてくれているので「今回の配色いいな…」とか「もう一回押すか迷うな…」というような感じで一人楽しんでおりました。
とまあ、こんな感じで自由に図形を書いたり文字を書いたりできるcanvasなのですが、ここで私「ずっと気になっていたjsライブラリ」があることを思い出したのです。
そのライブラリこそ…「Three.js」！
名前がシンプルでカッコいいですよねえ～
まあ皆さん知っていると思うのですが、業務で使うことは私の場合全くなかったので触れてこなかったんです…
せっかく暇だしcanvasやったし！ということで、今回はThree.jsにも挑戦してみたのですがそっちの方が長くなりそうなのでまた今度…
