はじめに
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で色を指定すれば変えられます。今回はやっていません。
