HTML5 Canvas要素で長方形と円を表示するサンプル

HTML5のCanvas要素で長方形と円を表示するサンプルです。

Canvas

コード

57,58行目にcanvasタグがあります。ここにグラフィックが描写されます。
19行目のstrokeRectメソッドで長方形の枠線を書きます。
22行目のfillRectメソッドで塗りつぶされた長方形を書きます。
33行目のarcメソッドで円の設定をします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Canvasの長方形と円のサンプル</title>
<style>
</style>
<script>
window.onload = function(){

	// 長方形のサンプル	
	var canvas1 = document.getElementById('test1');
	
	if (canvas1.getContext){

		var ctx1 = canvas1.getContext('2d');

		ctx1.strokeStyle = 'rgb(0,0,0)'; //枠線の色
		ctx1.strokeRect(10,10,60,30); //長方形の枠線

		ctx1.fillStyle='rgba(0,0,255,0.1)';//塗りつぶしの色
		ctx1.fillRect(10,50,60,30); //長方形を塗りつぶす;
	}

	// 円のサンプル
	var canvas2 = document.getElementById('test2');
	
	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();

		ctx2.beginPath();
		ctx2.arc(60,80,10,0,Math.PI*2.0,true);	//
		ctx2.strokeStyle = 'rgb(0,0,0)'; //枠線の色
		ctx2.stroke(); //
		ctx2.fillStyle='rgba(0,255,0,0.1)';//塗りつぶしの色
		ctx2.fill();
	}
}
</script>
</head>
<body>
<canvas id="test1" width="300" height="90"></canvas><br>
<canvas id="test2" width="300" height="100"></canvas>
</body>
</html>

結果

上記コードを実行すると以下のような長方形と円が表示されます。

a
a

関連の記事

HTML5 Canvas要素で三角形を表示するサンプル
HTML5 video要素で動画ファイルを再生するサンプル
HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)
HTML5 Geolocationの現在位置を取得するサンプル
HTML5 Web Storageのサンプル(Session StorageとLocal Storage)



△上に戻る