ネットワーク 5 (HTML5)

HTML5 とは

HTML5とは、現在、Web作成に主として使用されているマークアップ言語HTML4の新しいバージョンです。
HTML5のタグが、完全に表示できるブラウザはまだ存在しません。しかし、Canvas要素を始めとして徐々に対応が進んでいます。

HTML5 の新機能

動画・音声の再生(video/audio)
2D・3Dの描画(canvas)
Quake 2 in HTML5
オフラインでアプリケーションが動作する(アプリケーションキャッシュ)
ドメインをまたいだ通信(クロスドキュメントメッセージング、XMLHttpRequest Level2)
クライアントにデータ保存可能(Web Storage, Web SQL, Indexed Database API)
バックグラウンド処理可能(Web Workers)
サーバからのデータプッシュ、双方向通信(Server-Sent Events, Web Sockets)
ローカルファイルの読み取り(File API)

HTML5 のサンプル1

HTML5の、簡単なサンプルは以下のようになります。


<!DOCTYPE html>
<html>
<head>
<title>HTML5サンプル1</title>
<meta charset="UTF-8">
</head>
<body>
<h1>HTML5サンプル1</h1>
<p>
段落
</p>
</body>
</html>

HTML解説

<!DOCTYPE html>: HTML5の文書には、このDOCTYPEが必ず必要です。
<meta charset="UTF-8">: 文字のエンコーディング方法をUTF-8にします。

Canvas

Canvas要素によって、グラフィックスを描画することができます。
現在、標準で表示できるのは2Dの描画ですが、WebGLによって3Dの描画もできるようになりつつあります。

Canvas のサンプル1

Canvasによって、文字列を表示するHTML文書です。


<!DOCTYPE html>
<html>
<head>
<title>Canvasサンプル1</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Canvasサンプル1</h1>
<canvas id="canvas1" width=100 height=100></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.fillText("Hello World", 100, 100);
</script>
</body>
</html>

HTML解説

<canvas id="canvas1" width=100 height=100></canvas>: Canvasタグです。
idはcanvas1、横幅(width)100、高さ(height)100で、背景が透明な描画領域を作成します。
</canvas>までの間に書いた文字列は、Canvasタグが有効ではないブラウザで表示されます。
<script type="text/javascript">: JavaScriptを記述するためのタグです。
var canvas = document.getElementById("canvas1");: canvas1というidをもったCanvasを取得します。
var context = canvas.getContext("2d");: Canvasから、コンテキストを取得します。
この、コンテキストを使用してCanvasに描画してゆきます。
context.fillText("Hello World", 100, 100);: X座標100、Y座標100の位置に文字列"Hello World"を表示します。
Canvasの座標原点は、描画領域の左上です。

Canvas のサンプル2

Canvasによって、四角形と直線を表示するHTML文書です。


<!DOCTYPE html>
<html>
<head>
<title>Canvasサンプル2</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Canvasサンプル2</h1>
<canvas id="canvas2" width=300 height=300></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas2");
var context = canvas.getContext("2d");

context.fillRect(0, 0, 100, 100);
context.strokeRect(100, 100, 50, 50);

context.beginPath();
context.moveTo(10, 200);
context.lineTo(100, 250);
context.moveTo(100, 250);
context.lineTo(200, 200);
context.rect(150, 250, 50, 50);
context.stroke();
context.closePath();
</script>
</body>
</html>

HTML解説

context.fillRect(0, 0, 100, 100);: (0, 0)から、縦幅100、横幅100で塗りつぶされた四角形を描画します。
context.strokeRect(100, 100, 50, 50);: (100, 100)から、縦幅50、横幅50で四角形の枠を描画します。
context.beginPath();: 線の描画を開始します。
context.moveTo(10, 200);: 線の開始位置を(10, 200)にします。
context.lineTo(100, 250);: 線の開始位置(10, 200)から、(100, 250)まで線を描画します。
context.rect(150, 250, 50, 50);: (150, 250)から、縦幅50、横幅50で四角形を描画します。
context.stroke();: 線を書き出します。
context.closePath();: 線の描画を終わります。

Canvas のサンプル3

Canvasによって、画像を表示するHTML文書です。
(サンプル画像)
[サンプル画像(ガブリエル)]


<!DOCTYPE html>
<html>
<head>
<title>Canvasサンプル3</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Canvasサンプル3</h1>
<canvas id="canvas3" width=300 height=300></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas3");
var context = canvas.getContext("2d");

var image = new Image();
image.onload = function() {
	var w = canvas.width/2;
	var h = canvas.height/2;
	context.drawImage(image, 0, 0, w, h);
	context.drawImage(image, w, h, w, h);
};
image.src = "neko.png";
</script>
</body>
</html>

HTML解説

var image = new Image();: img要素を作成します。
image.onload = function() {: 画像の読み込みが終わったときに実行する関数を登録します。
var w = canvas.width/2;: canvas.widthは、Canvasの横幅です。
var h = canvas.height/2;: canvas.heightは、Canvasの縦幅です。
context.drawImage(image, 0, 0, w, h);: img要素imageに入っている画像を、Canvasの(0, 0)から縦幅w、横幅hで描画します。
image.src = "neko.png";: 画像neko.pngを読み込みます。
neko.pngが読み込み終わると、上のonloadに代入した関数が実行されます。

Canvas のサンプル4

円を描画し、指定した色で塗りつぶします。


<!DOCTYPE html>
<html>
<head>
<title>Canvasサンプル4</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Canvasサンプル4</h1>
<canvas id="canvas4" width=300 height=300></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas4");
var context = canvas.getContext("2d");

context.fillStyle = "#FF0000";
context.beginPath();
context.arc(100, 100, 100, 0, Math.PI*2, true);
context.closePath();
context.fill();

context.fillStyle = "rgb(0, 0, 255)";
context.beginPath();
context.arc(200, 100, 100, 0, Math.PI*2, true);
context.closePath();
context.fill();

context.fillStyle = "rgba(0, 255, 0, 0.5)";
context.beginPath();
context.arc(200, 200, 100, 0, Math.PI*2, true);
context.closePath();
context.fill();
</script>
</body>
</html>

HTML解説

context.fillStyle = "#FF0000";: 塗りつぶしの色を、(255, 0, 0)にします。
色の指定は、CSS3の方法がすべて使用できます。
context.beginPath();: 線の描画を開始します。
context.arc(100, 100, 100, 0, Math.PI*2, true);: (100, 100)を中心として、半径100、開始角度0、終了角度Math.PI*2(360度)、反時計回り(true)で円弧を描画します。
context.closePath();: 線を閉じます。
context.fill();: fillStyleによって指定された色で塗りつぶします。
context.fillStyle = "rgb(0, 0, 255)";: 塗りつぶしの色を、(0, 0, 255)にします。
context.fillStyle = "rgba(0, 255, 0, 0.5)";: 塗りつぶしの色を、(0, 255, 0)にして、透明度を0.5にします。

Canvas のサンプル5

簡単なアニメーションのサンプルです。


<!DOCTYPE html>
<html>
<head>
<title>Canvasサンプル5</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Canvasサンプル5</h1>
<canvas id="canvas5" width=300 height=300></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas5");
var context = canvas.getContext("2d");

var x = 10;
var y = 10;
var dx = 2;
var dy = 2;

function draw() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.fillRect(x, y, 30, 30);
	x += dx;
	y += dy;
	if(x > canvas.width - 30 || y > canvas.height - 30)
	{
		x = 10;
		y = 10;
	}
}
setInterval(draw, 10);
</script>
</body>
</html>

HTML解説

function draw() {: アニメーション時の、1フレームごとに実行される関数です。
context.clearRect(0, 0, canvas.width, canvas.height);: Canvasをクリアします。
context.fillRect(x, y, 30, 30);: (x, y)から縦幅30、横幅30で、塗りつぶされた四角形を描画します。
setInterval(draw, 10);: 関数draw()を、10mm秒ごとに実行します。

練習問題

Canvasのサンプル5 を参考にして、以下の様に画像がアニメーションするようにしてみましょう。

Prev | Next
index | home

abetmhr@gmail.com