はいどうも~。
雪の日は電車遅延でテンションが下がりがちなエンジニアの吉田です。
あたくし、通勤時間が通常だとだいたい1時間45分なのですが、
電車遅延があると、だいたい2時間を越える程度の通勤時間となり、
会社に到着した時点で、既にぐったりしていたり、していなかったり。
そんな中、家から最寄駅に着いて最初にげんなりするキッカケとなる
のが、駅にある電光掲示板で誇らしげにチラついていらっしゃる
「
【横須賀線 遅延】」というオレンジ色の掲示だったりします。
特に、家から駅までダッシュしたあとにお目にかかれたときなんかは、
凄まじい威力を発揮して頂けますね。洗練された脱力感を体験できる。
今回は、この電光掲示板を見た時にテンションが下がる気分を是非
共有したいと思い、HTML5のCanvasを使って表現してみます。
表現してみた結果、こんな感じのものが出来上がりました。
※Windows7 + Firefox10、Chrome17以外は動作確認してません。
※お使いのPCの性能によっては、ブラウザの応答がなくなるかもしれません。
※特にIE9はレンダリング遅いのでブラウザ固まっても怒らないでください。
※【追記】描画が遅すぎたので、このサンプルでは、モザイク化処理を省いています。
※【追記】本来はもっと輪郭がボヤけたような感じになるです。
もうなんか見ているだけでテンション下がる感じがします。
※ちなみに、この記事も遅延している電車の中で執筆しています。
という前置きの話はどうでもいいとして、今回の記事は、HTML5のCanvas
で電光掲示板もどきを作ってみたので、その作り方を紹介するというのが
本当の主旨だったりします。
(最近コードの伴わない記事が多かった自分への戒めの意も込め。。)
そうそう、記事の最後に、テキストを自分で入力できる形のものを、
貼り付けたので(jsdoitで)、みなさんの通勤で利用する路線や
駅名に書き換えて、是非テンションを下げてみてくださいね。
というわけで、作り方は、続きからどうぞ。