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

Canvas > 基本図形 > 円を描画する

以下のサンプルコードは，"mycanvas"というIDのCanvas上に，座標(50,40)を中心に半径30の（黒色の）円を描画するものです．

<!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");

		// 円を描画する
		var x = 50;
		var y = 40;
		var r = 30;

		// 座標(x,y)を中心に半径rの円のパスを作成する
		cxt.arc(x, y, r, 0, Math.PI * 2, true);
		// パスに沿って線を引く
		cxt.stroke();
}
//-->
</script>
</head>
<body>
<!-- Canvasの定義 -->
<canvas id="mycanvas" width="100" height="100">
</canvas>
</body>
</html>