HTML5のcanvasで円を描く

HTML5 javascript

マウスが円に近づくと円が小さくなっていくサンプルプログラム

HTML5のcanvasに縦横7個ずつ、計49個の円を描く。




以下がソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>

<script type="text/javascript">
<!--

var row=7; //横の数
var col=7; //縦の数
var zonesize = 130; // マウスがどれくらい近づいたら円が小さくなるかの度合い
var radiusBase = 30; // 円の大きさ
var mouseX = -1000; // マウスX座標
var mouseY = -1000; // マウスY座標

onload = function() {
	init();
}
function init() {
	// canvas対応しているか判定
	var canvas = document.getElementById('circle_canvas');
	if ( ! canvas || ! canvas.getContext ) { alert('error');return false; }

	// canvasサイズをとる
	var ctx = canvas.getContext('2d');
	var cWidth = canvas.width;
	var cHeight = canvas.height;

	// canvas上でマウスが動くたびに行うイベント処理を設定
	canvas.onmousemove = mouseMoveListner;
	function mouseMoveListner(e) {
		mousePosition(e);
		ctx.clearRect(0, 0, cWidth, cHeight);  // イベント毎にcanvasを白塗りリセット
		drawCircle(cWidth, cHeight, ctx);       // キャンバス再描画
	}

	// 初期表示の処理
	drawCircle(cWidth, cHeight, ctx);
}

// 本処理
function drawCircle(cWidth, cHeight, ctx){
	for(var i=1; i <= col; i++){  //縦
		for(var j=1; j <= row; j++){  //横
			// どの座標に円を置くか計算
			var circleX = (cWidth/(row+1))*j;
			var circleY = (cHeight/(col+1))*i;

			// 円の中心とマウスの距離を測る
			var aPos = circleX - mouseX;
			var bPos = circleY - mouseY;
			var dist = Math.sqrt(Math.pow(aPos,2) + Math.pow(bPos,2));

			// 円とマウスが近い場合、円の大きさを再計算(近いほどradiusは0に近づく)
			var radius = radiusBase;
			if(dist < zonesize ){
				radius = radius - (((radius)/zonesize) * (zonesize-dist));
			}

			// 円を描画
			ctx.beginPath();
			ctx.arc(circleX, circleY, radius, 0, Math.PI*2, false);
			ctx.stroke();
		}
	}
}
function mousePosition(e) {
	var rect = e.target.getBoundingClientRect();
	mouseX = e.clientX - rect.left;
	mouseY = e.clientY - rect.top;
}
//-->
</script>

</head>
<body>
<canvas id="circle_canvas" width=500 height=500 style="border:1px solid gray;">
</canvas>
</body>
</html>