tango238 · August 26, 2011 22:39
diff --git a/step3.html b/step3.html
 <!DOCTYPE HTML> 
 <html lang="ja"> 
 <head> 
 	<meta charset="UTF-8"> 
 	<title>Paint</title> 
 </head> 
 <body> 
 <header> 
 	<h1>Paint</h1> 
 </header> 
 <article> 
 <p> 
 	Mouse Position: <output id="out"></output> 
 </p> 
 <p> 
 	<canvas id="canvas" width="1024" height="450"></canvas> 
 </p> 
 </article> 
 <script> 
 (function(){
 
     // Canvas
     var canvas = document.getElementById('canvas');
     var context = canvas.getContext('2d');
 
    // マウスの動きを監視する
    canvas.addEventListener('mousemove', function(event){
        event.preventDefault();
        var out = document.getElementById('out');
        var p = getMousePosition(event);
        out.value = "x:" + p.x + " y:" + p.y;
    });
 
    // マウスのポジションを取得するメソッド
    function getMousePosition(event){
        var rect = event.target.getBoundingClientRect();
        return {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        };
    }
 })();
 </script> 
 </body> 
 </html>
	<!DOCTYPE HTML>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Paint</title>
	</head>
	<body>
	<header>
	<h1>Paint</h1>
	</header>
	<article>
	<p>
	Mouse Position: <output id="out"></output>
	</p>
	<p>
	<canvas id="canvas" width="1024" height="450"></canvas>
	</p>
	</article>
	<script>
	(function(){

	// Canvas
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');

	// マウスの動きを監視する
	canvas.addEventListener('mousemove', function(event){
	event.preventDefault();
	var out = document.getElementById('out');
	var p = getMousePosition(event);
	out.value = "x:" + p.x + " y:" + p.y;
	});

	// マウスのポジションを取得するメソッド
	function getMousePosition(event){
	var rect = event.target.getBoundingClientRect();
	return {
	x: event.clientX - rect.left,
	y: event.clientY - rect.top
	};
	}
	})();
	</script>
	</body>
	</html>