音声ファイルの事前ダウンロード前回はaudioタグをJavaScriptで操作しましたが、事前にダウンロードが完了した状態で再生を開始することができませんでした。ボタンをクリックした瞬間に鳴らす場合にラグが発生したり、再生途中で停止(ダウンロード待ち)する恐れがあります。今回はダウンロードが完了しないと音声が再生できないような処理を追加します。この手の処理はWebAudioAPIを用いたサンプルがネット上には転がっていますが、単にダウンロードされたことを検知したいだけで利用するには気が重いというか正直などころ面倒なので、前回同様audioタグを活かす方向で作成します。音声ファイルをJSで再生/停止するHTML5で音声を再生するには単純にaudioタグを使うだけで実現できますが、今回はJavaScriptから再生や停止をコントロールしたいと思います。CanvasでアニメーションCanvasを利用して簡単なパラパラアニメを作成してみます。原理としては授業中にノートや教科書の端に描いた絵をパラパラとめくって動かしたのと同じ。Canvasに描画したあとに適当な時間待機後、Canvasをお掃除したあとに少しだけ動かした絵を描画...をひたすら繰り返すという物です。これを実現するには大雑把に2つの方法がありまして、それぞれとりあげます。三角形Canavsに三角形を描画します。HTML5では四角形と円、線以外を描画する専用のメソッドは用意されていませんので、線を組み合わせることで三角形などのの図形を描くことができます。直線・曲線Canavsに線を描画します。ここでは純粋な直線と、曲線として円弧、ベジュ曲線を取り上げます。円Canavsに円を描画します。ここでは正円と、一部が欠けた円を取り上げます。四角形Canavsに四角形を描画します。四角形で囲んだ領域をまるっとキレイに削除することも可能です。Canvasにテキストを描くCanvasにテキストを描画します。フォントや色なども自由に指定できます。Canvasに画像を貼り付けるHTML5のCanvas上に絵を描画することが可能ですが、さすがにすべてをプログラムで描画するのは現実的ではありません。いうわけで今回はJPEGやPNGなどの画像を貼り付ける方法になります。今回は「ゆるドラシル」のアセットを利用させていただきました。カメラのフロントとリアを切り替えるスマホなどでカメラを操作する際に、リアとフロントのカメラをJavaScriptで切り替える簡単なサンプルです。写真などを出来る限り広い画面で、余計な情報を取り払って表示したい場合があります。ゲームなどではよくある要件だと思います。今回はそんなときに利用する「フルスクリーン化」を取り上げます。スマホの縦向き/横向きを検知する特にがっつり遊ぶタイプのスマホゲームでは、端末を横にして遊ぶことが多いと思います。電車内などで立ちながら利用されることの多いニュース系のアプリやコンテンツは大抵の場合横向きですよね。今回はスマホの向きを検知し、見た目を変化する方法についてメモします。カメラをJSで操作しフォトフレーム付き写真を撮影する以前、JavaScriptでカメラを操作し写真を撮影するサンプルコードを作成しましたが、今回はそこにフォトフレームを合成してみたいと思います。プリクラやスマホアプリでよくある見かけるやつですね。撮影した画像をダウンロードすることもできます。Canvasを画像としてダウンロードcanvasタグに現在描画されている内容を画像としてクライアントにダウンロードしてみます。Webブラウザなどのクライアントだけで完結するためサーバの負荷などを気にする必要がありません。今回はひたすらカウントアップするcanvasを、ボタンを押したタイミングでダウンロードできるサンプルです。複数のCanvasを合成する今回は複数のcanvasタグを合成し、最終的に1つのcanvasに画像として結合する処理を取り上げたいと思います。↑こんな感じで画像を表示したcanvasと、キャプションを表示したcanvasを合成します。ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。