Canvasでお絵描きアプリ

はじめに

Canvasでお絵描きアプリをReact, TypeScript, CodePen環境に翻訳と言うか移植しようとして、いろいろやって一つ成功しました。

実行例

See the Pen react-doodle by kalz2q (@kalz2q) on CodePen.

解説

この例ではhookはuseRefしか使っていない。useRefだけでリアルタイムにrendering出来てしまうのが不思議。マウスが移動するたびにuseStateでstate管理するのだろうな、と思っていました。

と言うわけでこれから理解します。

CodePen+React+TypeScripでのCanvasのminimumセットアップ

はじめに

Canvasの勉強を始めようと思います。
そのための最小限のセットアップです。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

解説

canvasの入門サイトを読むとhtmlでcanvasと呼ばれるタグを書くとデフォルトで描画エリアが出来て、javascriptでその中にdrawする、と言う流れです。
これをReactで実現するためにuseEffectでcreateElementして、getContextする必要があります。
そのあとに環境が出来たらif (context !== null)してからdrawする。drawの中身は普通のCanvasのテキストに書かれている内容です。
htmlに渡されるreturn以降の中でpng '' <img alt="" src{png}>と言うのが暗号みたいですが、これはpngを環境の準備が出来るまではnullとしておくことにより、準備ができてnullでなくなってから描画させるためのロジックみたいです。
drawのなかでcanvasElem.widthとかデフォルトの数字を使っているのは、通常のhtmlではデフォルトで描画エリアが作られて見ることが出来るのに対応した数字が入っていて、Reactで描く場合当初の段階では見えないのでこの例では一行目にとりあえず塗りつぶしています。塗りつぶしのデフォルトはblackみたいです。cssで変えられないみたいですが、fillRectする前にfillStyleで色を指定すれば変えられます。今回はやっていません。

CSS変数とsetIntervalのランダムカラーピッカー

はじめに

前回CSS変数を使ってbackground-colorを自動で変える、と言うのをやってみて

start / stop

ボタンを付けようとしたらrequestAnimationFrameではちょっと無理みたいだったので、setIntervalベースに書き換えました。
呼び出すたびにrandomで選ぶのをやめて最初にリストをランダムソートしてcounterで頭から順に代入していく方法にしました。たった150色なのにランダムに選んでいるとすぐ同じ色が出てきてしまうのがこれで解決します。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

感想

ネットでReactではsetIntervalやrequestAnimationFrameは扱いが難しいと書いている人が多いけど必ずしもそうは感じなかった。
題材としてはちょっと前だと途方に暮れるような話がエラーを潰していくと出来てしまうのはReact+TypeScriptのすごいところです。
改めて感じました。

CSS変数で名前付きカラーをランダムに表示する

はじめに

いろいろ使い方を覚えて来たので、組み合わせてみよう。
色名をリストに持って、そこからランダムに色名を取得してCSS変数に入れる。
これをsetIntervalを使って1秒ごとに実行する。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

解説

setIntervalを起動するのにuseEffectに入れたけどこれが普通のやり方かどうか。
今のままだと永久に動いているのでストップボタンを付けたい。
=> interval で動いているものを stop するのは難しいみたいです。
timer だとストップ出来たのでなんとかならないか。

CSS変数を使って色を変える

はじめに

CSS変数を使う練習です。ボタンを押すと背景色が変わります。

実行例

See the Pen react-change-background-color by kalz2q (@kalz2q) on CodePen.

解説

特になし。

よくわかりません。

start stop トグルスイッチ

はじめに

start stop のようなトグルスイッチをreact+typescriptでどう書くか

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

説明

onClickで関数を呼び出して呼び出された関数の中でifを使って分岐している。

CSSで半円を描く

はじめに

CSSで半円を描く方法をサンプルコード付き解説! qumeru.com

をReact, Typescript, CodePenベースに書き直してみました。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

感想

なぜこういう絵が描けるのかよくわからないのであとで追記します。

border-radius: 左上 右上 右下 左下;

今まで border-radius は % で指定すると思っていて、50% を指定すると円になるのを使っていたけれど、こうして px で指定すると書かれている図形を超えて指定できるので、半円が描ける。と言うことは 50% も calc(0px+50%) と書けば px 換算値になるかもしれない。

緑で描いた方の記法は四隅の縦と横を別々に指定する方法で複雑なのでわかりません。calc() を使った方が簡単で間違いが少なそうですね。