pastak · June 28, 2012 13:32
diff --git a/gistfile1.html b/gistfile1.html

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="ja" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title>Canvas</title>
 <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
 <script>
 function drawCanvas(){
 　　　　// canvas要素のDOMオブジェクトを取得
 						  　　　　var canvas = document.getElementById("canvasl");
 						  　　　　//描画コンテキストを取得する
 						  　　　　var context = canvas.getContext("2d");
 						  　　　　//四角形の描画
 						  　　　　context.fillRect( 0, 0, 150, 100 );
 						  　　　　//テキストの描画
 						  　　　　context.fillText("Hello, Canvas!", 155, 110);
 						  　　　　//線の描画を開始
 						  　　　　context.biginPath();
 						  　　　　//線の描画
 						  　　　　context.moveTo (0, 100);
 						  　　　　context.lineTo (300, 100);
 						  　　　　context.moveto (150, 0);
 						  　　　　context.lineTo (150, 200);
 						  　　　　//キャンバスの枠として四角を描画する
 						  　　　　context.rect (0, 0, 300, 200);
 						  　　　　//画面の書き出し
 						  　　　　context.stroke();
 						  　　　　//線の描画を終了
 						  　　　　context.closePath();
 }
 </script>
 </head>
 <body onload="drawCanvas()">
 　<canvas id="canvasl" width="300" height="200"></canvas>


 <h5>添削コメント</h5>
 <pre>
 ＊8行目の記述
 IEの場合はcanvasに対応してないので、対応させるためのjavascriptライブラリーを読み込ませています。ここからダウンロードしましょう
 http://excanvas.sourceforge.net/
 ＊javascriptの書き方
 基本的に&lt;script>内に書きます。書く場所は&lt;head>に書く方が良いですけど、それだとonloadで呼び出したりしないといけないので、&lt;body>内の末尾に書くと良いかもです。
 （説明面倒なので、ざっくり言うと、htmlは上から順番に読み込まれて描画されます。それと同じくjavascriptは&lt;script>内に書くとそのタグが読み込まれた位置で通常は実行されるので対象の&lt;canvas>がブラウザによって描画していないとエラーが起こるので関数にまとめておいて、onloadイベントで呼び出すかbodyの末尾に書きます）
 ＊var canvas = document.getElementById("canvasl");の部分
 ここはhtmlドキュメント内のcanvaslというidを持った要素を取得するという命令になっています。
 元のやつだと対象のcanvasが&lt;canvas id="canvassample"〜>となっていたので、canvaslに統一しておきました。
 まぁある程度のことなら教えられるので適当にどうぞ。
 勉強も頑張れ〜〜〜〜
 </pre>

 						  　</body>
 						  </html>

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="ja" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>Canvas</title>
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
	<script>
	function drawCanvas(){
	// canvas要素のDOMオブジェクトを取得
	var canvas = document.getElementById("canvasl");
	//描画コンテキストを取得する
	var context = canvas.getContext("2d");
	//四角形の描画
	context.fillRect( 0, 0, 150, 100 );
	//テキストの描画
	context.fillText("Hello, Canvas!", 155, 110);
	//線の描画を開始
	context.biginPath();
	//線の描画
	context.moveTo (0, 100);
	context.lineTo (300, 100);
	context.moveto (150, 0);
	context.lineTo (150, 200);
	//キャンバスの枠として四角を描画する
	context.rect (0, 0, 300, 200);
	//画面の書き出し
	context.stroke();
	//線の描画を終了
	context.closePath();
	}
	</script>
	</head>
	<body onload="drawCanvas()">
	<canvas id="canvasl" width="300" height="200"></canvas>


	<h5>添削コメント</h5>
	<pre>
	＊8行目の記述
	IEの場合はcanvasに対応してないので、対応させるためのjavascriptライブラリーを読み込ませています。ここからダウンロードしましょう
	http://excanvas.sourceforge.net/
	＊javascriptの書き方
	基本的に<script>内に書きます。書く場所は<head>に書く方が良いですけど、それだとonloadで呼び出したりしないといけないので、<body>内の末尾に書くと良いかもです。
	（説明面倒なので、ざっくり言うと、htmlは上から順番に読み込まれて描画されます。それと同じくjavascriptは<script>内に書くとそのタグが読み込まれた位置で通常は実行されるので対象の<canvas>がブラウザによって描画していないとエラーが起こるので関数にまとめておいて、onloadイベントで呼び出すかbodyの末尾に書きます）
	＊var canvas = document.getElementById("canvasl");の部分
	ここはhtmlドキュメント内のcanvaslというidを持った要素を取得するという命令になっています。
	元のやつだと対象のcanvasが<canvas id="canvassample"〜>となっていたので、canvaslに統一しておきました。
	まぁある程度のことなら教えられるので適当にどうぞ。
	勉強も頑張れ〜〜〜〜
	</pre>

	</body>
	</html>
No results found