HTML5

[HTML5] 音声をフェードイン・フェードアウトする - audioタグ編

今回は音声ファイルを音量が徐々に上がっていく「フェードイン」する形で再生を開始、逆に音量が徐々に下がっていく「フェードアウト」し再生を終了することに挑戦してみます。 通常は以下のようにplay()で開始するわけですが、これだと音量MAXで始まってし…

[HTML5] Canvasを画像に変換しサーバへ送信する

Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。 今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーター…

[HTML5] 音声ファイルの事前ダウンロード - audioタグ編

前回はaudioタグをJavaScriptで操作しましたが、事前にダウンロードが完了した状態で再生を開始することができませんでした。例えばボタンをクリックした瞬間に鳴らす場合にラグが発生したり、再生途中で停止(ダウンロード待ち)する恐れがあります。今回はダ…

[HTML5] 音声ファイルをJSで再生/停止する - audioタグ編

HTML5で音声を再生するには単純にaudioタグを使うだけで実現できますが、今回はJavaScriptから再生や停止をコントロールしたいと思います。

[HTML5] Canvasでアニメーション

Canvasを利用して簡単なパラパラアニメを作成してみます。 原理としては授業中にノートや教科書の端に描いた絵をパラパラとめくって動かしたのと同じ。Canvasに描画したあとに適当な時間待機後、Canvasをお掃除したあとに少しだけ動かした絵を描画…をひたす…

[HTML5] Canvasに図形を描く - 三角形

Canavsに三角形を描画します。 HTML5では四角形と円、線以外を描画する専用のメソッドは用意されていませんので、線を組み合わせることで三角形などのの図形を描くことができます。

[HTML5] Canvasに図形を描く - 直線・曲線

Canavsに線を描画します。 ここでは純粋な直線と、曲線として円弧、ベジュ曲線を取り上げます。

[HTML5] Canvasに図形を描く - 円

Canavsに円を描画します。ここでは正円と、一部が欠けた円を取り上げます。

[HTML5] Canvasに図形を描く - 四角形

Canavsに四角形を描画します。また四角形で囲んだ領域をまるっとキレイに削除することも可能です。

[HTML5] Canvasにテキストを描く

Canvasにテキストを描画します。フォントや色なども自由に指定できます。

[HTML5] Canvasに画像を貼り付ける

HTML5のCanvas上に絵を描画することが可能ですが、さすがにすべてをプログラムで描画するのは現実的ではありません。というわけで今回はJPEGやPNGなどの画像を貼り付ける方法になります。 今回は「ゆるドラシル」のアセットを利用させていただきました。 yur…

[JavaScript] キーボードからの入力を取得する

今回はJavaScriptでキーボードの何らかのキーが押されたら、そのキーコードを取得する処理を取り上げます。 解説 キーコードを取得 結論から言うと以下のようにkeypress, keydown, keyupのいずれかのイベント処理で引数として渡されるオブジェクトのe.keyCod…

[HTML5] カメラのフロントとリアを切り替える

スマホなどでカメラを操作する際に、リアとフロントのカメラをJavaScriptで切り替える簡単なサンプルです。

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

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

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

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

[HTML5] カメラをJSで操作しフォトフレーム付き写真を撮影する

以前、JavaScriptでカメラを操作し写真を撮影するサンプルコードを作成しましたが、今回はそこにフォトフレームを合成してみたいと思います。 プリクラやスマホアプリでよくある見かけるやつですね。撮影した画像をダウンロードすることもできます。

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

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

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

今回は複数のcanvasタグを合成し、最終的に1つのcanvasに画像として結合する処理を取り上げたいと思います。 ↑こんな感じで画像を表示したcanvasと、キャプションを表示したcanvasを合成します。

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

今回はHTML5の機能を利用した「QRコードリーダー」を作成します。 以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。 PCやスマホに付いているカメラの映像を0.3秒毎にチェックし…

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

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

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

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