【第一回】一人勉強会『Canvas　その1』

休みの日を使って隔週一くらいで一人勉強会をすることに決めました、
コーダーのさやさんです。
（ディレクター業もさせていただいております）

先週末第一回目の勉強会をスタバで2時間ほど行いまして……

（キャラメル フラペチーノとエビブロッコリークリーム フォカッチャサンドが美味しかったです）

今回は第一回目の勉強テーマ『Canvas』で学んだことを記事にしようと思います！

『canvasとは』

HTML の canvas要素 と Canvas スクリプティング API や WebGL API を使用して、グラフィックやアニメーションを描画することができます。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas

つまり『イマドキでリッチなweb表現ができるすごい要素』と覚えていただければと思います。

Canvas×グラデーション

See the Pen
Yzzbrbm by sasayama (@sasayama)
on CodePen.

グラデーションはcssでも表現できるのですが、CanvasはJavaScriptと組み合わせて使う要素なので
ここからもっといろんな表現につなげることが出来ます。

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.

（大きな画像を使っているので見づらくてすみません…codepenのロゴをクリックしてcodePen上で見てください）

granim.jsのサンプルページでは他にもロゴ画像に流れるグラデーションを重ねる表現を紹介していたりしますので、ぜひ見てみてください！

そんなわけで2時間での集中勉強会、第一回目の成果でした。
『granim.js』というjsライブラリと使い方を知れたのが一番の成果かと思いますが、
Canvasをもっと基本から勉強したかったというのがこの日の反省点でした。

Canvasはイマドキのリッチなweb表現には欠かせない要素です。
とても2時間じゃ学び尽くせなかったので、しばらくはCanvasをテーマに一人勉強会を開催しようと思います。
（次はIchiei Taguma×デザート ストロベリーディスカバリーを食べたいと思います）