1. /
  2. HTML5

HTML5

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

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

これを実現するには大雑把に2つの方法がありまして、それぞれとりあげます。
続きを読む

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

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

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

HTML5のCanvas上に絵を描画することが可能ですが、さすがにすべてをプログラムで描画するのは現実的ではありません。というわけで今回はJPEGやPNGなどの画像を貼り付ける方法になります。

今回は「ゆるドラシル」のアセットを利用させていただきました。

ゆるドラシル ツクール素材提供サイト
http://yurudora.com/tkool/
ゲーム制作に役立つ「ゆるドラシル」素材を無料でご提供！
yurudora.com

続きを読む

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

今回はJavaScriptでキーボードの何らかのキーが押されたら、そのキーコードを取得する処理を取り上げます。

解説

キーコードを取得

結論から言うと以下のようにkeypress, keydown, keyupのいずれかのイベント処理で引数として渡されるオブジェクトのe.keyCodeを参照するだけです。

window.addEventListener("keydown", (e)=>{
  const keycd = e.keyCode;
});

ここで注意すべき点としては、例えば「A」キーを押したらAという文字列が入ってくるわけではなく、キー毎に割り当てられた数字が入っている点です。「A」キーなら整数の65ですね。

続きを読む

[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コードの場所も簡単にマーキングする機能も付けてみました。

続きを読む