たゆたうの魂: 第1回HTML5のススメ

暑い日々が続きますね。KOYAです。

まだまだソーシャルアプリの売上はフィーチャーフォンの方が大きいですが、

AndroidやiPhoneを所持している方も多くなってきました。

という事で、そろそろスマートフォン向けソーシャルアプリ。。。。

HTML5で作ることをおすすめします。

第１回の今回はHTML5の中でも特に注目されているキャンバスタグのよく使う方法について記載しようと思います。

そもそもキャンバスタグとは、

標準のHTMLとJavascriptで、線や円などの図形、画像などを複合的に描画することが出来ます。

今回は画像と画像を組み合わせようと思います。

上記２つの画像を用意します。

わずか数ステップを記述すれば

このように画像を重ねることが可能。

<!DOCTYPE HTML>

<html>

<head>

window.onload = function () {

main();

}

function main() {

// キャンバスタグを取得

canvas = document.getElementById("test");

// コンテキストを設定

ctx = canvas.getContext("2d");

// 背面を黒塗り

ctx.fillRect(0, 0, 126, 151);

// 明日のキャバクイーン画像

var objectCaba = new Image();

objectCaba.src = "images/caba.png";

ctx.drawImage(objectCaba, 0, 0, 201, 151,0, 0, 201, 151);

// たゆたうロゴ

var objectTayutau = new Image();

objectTayutau.src = "images/tayutau.png";

ctx.drawImage(objectTayutau, 0, 0, 126, 151,0, 80, 60, 70);

}

</script>

</head>

<body>

</body>

</html>

と記載すれば、下記のように画像を重ね合わせて描画することが可能です。

canvasタグは他のネイティブアプリ等と同様の書き方でほぼ書けるお手軽タグとなっています。

iPhone、Androidで両対応するようなことがあれば、是非活用してくださいね！！

たゆたうの魂