HTML5のcanvasを使って四角形を塗りつぶしてみる

*Graphics +html5Canvas

四角形を塗りつぶす例
ChromeとFirefoxで動いた。IEはcanvasに対応してない。
iPhoneのSafariでも動いた。不思議
http://d.hatena.ne.jp/Syunpei/20090703/1246631018

canvasでアニメーション

clearRect(x,y,width,height)を呼ぶと簡単。
Canvasリファレンス - HTML5.JP

ソース

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Example: HTML5 canvas</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<canvas id="canvassample" width="320" height="240"></canvas>
<script type="text/javascript">
window.onload = function() {
	setInterval('draw()',10);
};
var y = 20;
function draw() {
	/* canvas要素のノードオブジェクト */
	var canvas = document.getElementById('canvassample');
	/* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
	if ( ! canvas || ! canvas.getContext ) {
		return false;
	}
	/* 2Dコンテキスト */
	var ctx = canvas.getContext('2d');
	/* 四角を描く */
	ctx.beginPath();
	ctx.moveTo(20, y);
	ctx.lineTo(120, y);
	ctx.lineTo(120, 120);
	ctx.lineTo(20, 120);
	ctx.closePath();
	ctx.stroke();
	if (y >= 120) {
		y = 20;
		ctx.clearRect(20,20,120,120);
	} else {
		y = y + 1;
	}
};
</script>
<p>Example: HTML5 canvas</p>
<p><a href="http://www.html5.jp/canvas/ref.html">http://www.html5.jp/canvas/ref.html</a></p>
</body>
</html>

おもしろ！