HTML5のCanvas要素の勉強のために作成したサンプルが少したまったのでご紹介します。
globalCompositeOperation
Canvasの魅力的な機能のひとつに合成処理があります。図形などを描画するときにglobalCompositeOperationプロパティを設定することで、描画先となるCanvasの内容と合成処理を行い、その結果を描画することができます。
合成とクリッピング（MDN）
globalCompositeOperation プロパティ（HTML5.jp）
ドキュメントを読むだけだと眠くなるので動作確認用のコードを書いてみました。動かす場合は現在大きいウィンドウサイズにしか対応していないので、お手数ですがCodePenに飛んで頂けたらと思います。
See the Pen canvas by senmyou (@senmyou) on CodePen.
lighterやmultiply、screenなど、重なった色を演算して描画するのっておもしろいですね。使いこなせると楽しいかも。
Memo
- globalCompositeOperationプロパティを指定しない場合はデフォルトとしてsource-overが設定されます。source-overはこれから描画しようとする図形をCanvasの内容の上に描く設定です。
- 気をつける点としては、globalCompositeOperationプロパティやglobalAlphaプロパティはいったん関数を抜けたりgetContext(“2d”)やbeginPath()を実行しても、値はクリアされずに保持されているということです。つまり「普通に描画するのでglobalCompositeOperationをわざわざ設定することないよね」と思っていても、前に合成処理を行っていればそれが反映されてしまいます。globalCompositeOperationプロパティやglobalAlphaプロパティを設定した場合は、描画後にデフォルトに戻すか、またはsave()/restore()で状態を管理しないとトラブルの元になります。
アニメーション＋残像効果
Canvasアニメーションのサンプルです。
- arc(), fill()でsin/cos式の軌跡を描画
- requestAnimationFrame()によるブラウザの再描画タイミングに合わせた描画
- globalAlphaによる透過設定でCanvasを塗り重ねていくことで残像を表現
See the Pen canvas by senmyou (@senmyou) on CodePen.
テキストのネオン効果
ネットでCanvasの使い方を探していたときに素晴らしいサイトを見つけました。
canvas のタイポグラフィ効果（HTML5 Rocks）
魅力的なサンプルに詳しい解説。情報の量、質ともにすごいと思います。そして、ありがたいことにサイトの下の方からソースコードを一式ダウンロードできます。
これをまねてみることにしました。
。。。とはいうものの、やってることが私にとってレベル高過ぎ。ちょっとあきらめかけましたが、根性で無理やり簡略化して動かしました。きっとなにか足りない部分とかあるかもしれませんが、とりあえず、ということで。
See the Pen canvas by senmyou (@senmyou) on CodePen.
これ、CSSでもtext-shadowを使って簡単にできるんですよね。苦労してコーディングしたのにこのままじゃ報われないということで、JavaScriptを活かしたサンプルを無理やり作りました。
See the Pen canvas by senmyou (@senmyou) on CodePen.
。。。ちょっと微妙ですかね。ソースの方はさらに微妙な具合に仕上がってます。
もうひとつ、ジッター効果なるものもまねをさせて頂きました。
See the Pen canvas by senmyou (@senmyou) on CodePen.
。。。うつくしぃ。
一番最後の「残像—ジェネレーティブ効果」も素晴らしい作品でまねてみました。簡略化してなんとか表示できたのですが、これだけは内容がよくわからないため載せるのはあとにしようと思います。
CanvasってAPIの数自体はそんなにないですし使い方もわりと簡単なんですが、ネットやCodePenなどで芸術的な作品を見るたびに驚きと感銘を受けます。さしあたり、CodePenで「canvas」を検索するとたくさんでてきますので、ご覧になってみてはいかがでしょうか。それでは、すてきなキャンバスライフを。