HTML Canvas要素で長方形と円を表示する

サンプル	Canvas
	長方形を表示する
	円を表示する

Canvas

JavaScriptで２Dグラフィックスを描けます。
<canvas>タグを使用します。
以下はMDNのCanvas APIのリンクです。
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

長方形を表示する

Canvasで作成した長方形です。

上記サンプルのコードです。

<canvas id="canvas1" width="300" height="90"></canvas>

<script>
	var canvas1 = document.getElementById("canvas1");
	
	if (canvas1.getContext){
		var ctx1 = canvas1.getContext("2d");

		ctx1.strokeStyle = "rgb(0,0,0)"; //枠線の色
		ctx1.strokeRect(10,10,160,70); //長方形の枠線

		ctx1.fillStyle="rgba(0,0,255,0.1)";//塗りつぶしの色
		ctx1.fillRect(10,10,160,70); //長方形を塗りつぶす;
	}
</script>

描写の場所

1行目にcanvasタグがあります。ここにグラフィックが描写されます。

描画コンテキスト

4-7行目は、描画コンテキストを取得しています。
描画コンテキストは、描画する出力先や描画の方法を持つ情報です。
7行目のgetContextメソッドの引数2dは、ブラウザが持つ描画のプログラム名です。

長方形の作成

9行目のstrokeStyleは、線の色を指定します。
10行目のstrokeRectメソッドは、長方形を作成します。

塗りつぶす色を指定する

12行目のfillStyleは、塗りつぶす色を指定します。
13行目のfillRectメソッドは、塗りつぶしを行います。

円を表示する

Canvasで作成した円です。

上記サンプルのコードです。

<canvas id="canvas2" width="300" height="90"></canvas>

<script>
	var canvas2 = document.getElementById("canvas2");
	
	if (canvas2.getContext){
		var ctx2 = canvas2.getContext("2d");

		ctx2.beginPath();
		ctx2.arc(20,40,10,0,Math.PI*2.0,true);	//
		ctx2.strokeStyle = "rgb(0,0,0)"; //枠線の色
		ctx2.stroke(); //
		ctx2.fillStyle="rgba(0,0,255,0.1)";//塗りつぶしの色
		ctx2.fill();

		ctx2.beginPath();
		ctx2.arc(40,60,10,0,Math.PI*2.0,true);	//
		ctx2.strokeStyle = "rgb(0,0,0)"; //枠線の色
		ctx2.stroke(); //
		ctx2.fillStyle="rgba(255,0,0,0.1)";//塗りつぶしの色
		ctx2.fill();
	}
</script>

描写の場所

1行目にcanvasタグがあります。ここにグラフィックが描写されます。

描画コンテキスト

円の作成

10行目のarcメソッドは、円の設定をしています。

枠線の色を指定する

11行目のstrokeStyleは、線の色を指定します。
12行目のstrokeメソッドは、線を表示します。

塗りつぶす色を指定する

13行目のfillStyleは、塗りつぶす色を指定します。
14行目のfillメソッドは、塗りつぶしを行います。