なぜ僕は今Canvasを触っているんだろう……
まっしろなキャンバスを眺めていると思うのですよ。
まるでこれは僕の人生みたいだってね。生きていてなんにもなかった。そう思いません？だからこそ何かしてやろうとあがいたりもがいたりするんだけどね、何もかもが手遅れなんですよね。「溺れる犬は棒で叩け」って名台詞があるように落ちるところまで落ちると、もうどうしようもないんですよ。救いがない。何一つ人生に彩りを与えることができない。だからまっしろなまま。人生というキャンバスは色彩という命を与えられることもなく野ざらしのまま打ち捨てられていくのです……。
Canvas tutorial - Web APIs | MDN
てなわけでして前回中途半端に残したCanvas Tutorialの続きやっていきます。
とりあえずアニメーション用テンプレートを作るとしたら以下でいけそうな気がした。構成としてはUnityでいうStart()とUpdate()的な処理をのせてるノリ。
if (canvas.getContext) { let ctx = canvas.getContext('2d'); let init = () => { // ここに初期化コード window.requestAnimationFrame(draw); } let draw = () => { // ここにアニメ描画コード window.requestAnimationFrame(draw); } init(); }
setInterval()、setTimeout()以外にもアニメーション制御に使えそうな命令あったんですね……。
参考：requestAnimationFrame
Window.requestAnimationFrame() - Web API | MDN
こっちの方がメモリのこと考えてくれるらしい。
マウスイベントと組み合わせることでゲームっぽいことも可能らしいけどもとりあえず今は放置。さすがにそこまでいくとライブラリ使うわ…。
参考
Game development | MDN
じゃあ次行きます。
チュートリアルのやつをひとつに合わせてみた。これもう少しデザインいじればちょっとしたツールぐらいにはなる気がする。しかしまあ画像操作系、CSS3だとfilterプロパティが普通にあるのでグレスケとか色反転とかはあんまり魅力に感じるものでなかったりする。とりあえずこんな操作もできるんだよって感じで記憶の片隅にとどめておく。
addHitRegionについての説明。実験機能なんでまあ無視して次行きます。
一応実行するとこんな目の領域に触れたときにイベントが発火するとのことです。
参考
CanvasRenderingContext2D.addHitRegion() - Web API | MDN
残りはCanvasのパフォーマンスをあげるための小技とかです。ここはざっとでいいかな。ゲームみたいな感じでレイヤーかさねたい場合は次のようにすればいいらしい。
<div id="stage"> <canvas id="ui-layer" width="480" height="320"></canvas> <canvas id="game-layer" width="480" height="320"></canvas> <canvas id="background-layer" width="480" height="320"></canvas> </div> <style> #stage { width: 480px; height: 320px; position: relative; border: 2px solid black; } canvas { position: absolute; } #ui-layer { z-index: 3; } #game-layer { z-index: 2; } #background-layer { z-index: 1; } </style>
