Canvas >基本図形 /// HTML5チュートリアル（メモ）

Canvas > 基本図形 > 直線を描画する

以下のサンプルコードは，"mycanvas"というIDのCanvas上に，座標(20,20)から座標(80,80)まで（黒色の）直線を描画するものです．

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>直線を描画する（サンプル）</title>
<meta name="Author" content="Scyphus Solutions Co. Ltd." />
<meta name="copyright" content="(C) 2011 Scyphus Solutions Co. Ltd.  All rights reserved." />
<script type="text/javascript"><!--
window.onload = function()
{
		// IDからCanvasを取得する
		var canvas = document.getElementById("mycanvas");
		// Canvasの2次元コンテキストを取得する
		var cxt = canvas.getContext("2d");

		// 線を描画する
		cxt.beginPath();		// パスを開く
		cxt.moveTo(20, 20);	// 座標(20,20)に移動
		cxt.lineTo(80, 80); // 座標(80,80)までパスを引く
		cxt.closePath();		// パスを閉じる
		cxt.stroke();				// パスに沿って線を引く
}
//-->
</script>
</head>
<body>
<!-- Canvasの定義 -->
<canvas id="mycanvas" width="100" height="100">
</canvas>
</body>
</html>