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

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

以下のサンプルコードは，"mycanvas"というIDのCanvas上に，座標(50,40)を中心に角度0から角度π/3[rad]までの半径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;
		var angleS = 0;
		var angleT = Math.PI / 3;
		var anticlockwise = false;

		// 座標(x,y)を中心に角度angleSから角度angleTまでの半径rの弧のパスを
		// 時計回りに作成する（anticlockwiseがtrueの場合は反時計回り）
		cxt.arc(x, y, r, angleS, angleT, anticlockwise);
		// パスに沿って線を引く
		cxt.stroke();
}
//-->
</script>
</head>
<body>
<!-- Canvasの定義 -->
<canvas id="mycanvas" width="100" height="100">
</canvas>
</body>
</html>