UPDATE：2019.11.25
- CATEGORY
【第一回】一人勉強会『Canvas その1』
休みの日を使って隔週一くらいで一人勉強会をすることに決めました、コーダーのさやさんです。
（ディレクター業もさせていただいております）
先週末第一回目の勉強会をスタバで2時間ほど行いまして……
（キャラメル フラペチーノとエビブロッコリークリーム フォカッチャサンドが美味しかったです）今回は第一回目の勉強テーマ『Canvas』で学んだことを記事にしようと思います！
つまり『イマドキでリッチなweb表現ができるすごい要素』と覚えていただければと思います。『canvasとは』
HTML の canvas要素 と Canvas スクリプティング API や WebGL API を使用して、グラフィックやアニメーションを描画することができます。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas
Canvas×グラデーション
See the Pen Yzzbrbm by sasayama (@sasayama)
on CodePen.
ここからもっといろんな表現につなげることが出来ます。
Canvas×グラデーション×アニメーション
See the Pen poomWXW by sasayama (@sasayama)
on CodePen.
波は以下のサイトを参考に、色の部分をグラデーションに変更しています。
Canvasで波のアニメーションを描画する
Canvas×グラデーション×アニメーション2（granim.js）
See the Pen xxxNXom by sasayama (@sasayama)
on CodePen.
こちらも通常はcssで表現できるのですが、granim.jsというjsライブラリを使うと
簡単かつ、幅広いおしゃれなグラデーション表現ができるようになります。
たとえばこんなふうに画像にグラデーションを重ねる表現も簡単に実装可能に！
See the Pen MWWdOyG by sasayama (@sasayama)
on CodePen.
granim.jsのサンプルページでは他にもロゴ画像に流れるグラデーションを重ねる表現を紹介していたりしますので、ぜひ見てみてください！
そんなわけで2時間での集中勉強会、第一回目の成果でした。
『granim.js』というjsライブラリと使い方を知れたのが一番の成果かと思いますが、
Canvasをもっと基本から勉強したかったというのがこの日の反省点でした。
Canvasはイマドキのリッチなweb表現には欠かせない要素です。
とても2時間じゃ学び尽くせなかったので、しばらくはCanvasをテーマに一人勉強会を開催しようと思います。
（次はIchiei Taguma×デザート ストロベリーディスカバリーを食べたいと思います）
