HTML5

[HTML5] フルスクリーンの開始と解除

例えば写真などを出来る限り広い画面で、余計な情報を取り払って表示したい場合があります。ゲームなどではよくある要件だと思います。今回はそんなときに利用する「フルスクリーン化」を取り上げます。

続きを読む

[HTML5] スマホの縦向き/横向きを検知する

特にがっつり遊ぶタイプのスマホゲームでは、端末を横にして遊ぶことが多いと思います。電車内などで立ちながら利用されることの多いニュース系のアプリやコンテンツは大抵の場合横向きですよね。今回はスマホの向きを検知し、見た目を変化する方法についてメモします。

続きを読む

[HTML5] Canvasを画像としてダウンロード

canvasタグに現在描画されている内容を画像としてクライアントにダウンロードしてみます。
Webブラウザなどのクライアントだけで完結するためサーバの負荷などを気にする必要がありません。

今回はひたすらカウントアップするcanvasを、ボタンを押したタイミングでダウンロードできるサンプルです。
続きを読む

[HTML5] 複数のCanvasを合成する

今回は複数のcanvasタグを合成し、最終的に1つのcanvasに結合する処理を取り上げたいと思います。

↑こんな感じで画像を表示したcanvasと、キャプションを表示したcanvasを合成します。
続きを読む

[HTML5] QRコードリーダーを作成する

今回はHTML5の機能を利用した「QRコードリーダー」を作成します。
以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。

PCやスマホに付いているカメラの映像を0.3秒毎にチェックし、QRコードが見つかったらQRに埋め込まれている情報を表示してくれます。見つかったQRコードの場所も簡単にマーキングする機能も付けてみました。

続きを読む

[HTML5] カメラをJSで操作し写真を撮影する

HTML5ではPCやスマホのデバイスの機能をJavaScriptから直接利用することができるようになりました。今回はカメラを操作し、デジカメのような要領で静止画を撮影する簡単なサンプルを作ってみたいと思います。

カメラの映像が向かって左側に写り続け、良いタイミングで下にある「シャッター」ボタンをクリックすると、右側に撮影した静止画が表示されます。ボタンをクリックするとシャッター音も再生されます。
続きを読む

[mixi] [Webネタ]テーブルアートとcanvas

わかんない人はスルーしてください(;´∀`)

※注意!
20分くらいかけて書いた文章が一瞬で消えました(号泣)2度書くのがめんどいのでURLだけ載せておきます(;´∀`)各自想像して、分かる人だけつんのめってびっくりしてください(笑)
続きを読む