ikr7/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset='UTF-8'>
		<link rel='stylesheet' href='./main.css'>
	</head>
	<body>
		<div id='all'>
			<h1>モンテカルロ法による円周率算出</h1>
			<canvas></canvas>
			打つ点の数:
			<input type='number' value='1000'>
			<button>算出</button>
			結果: <span></span>
		</div>
	</body>
	<script src='./main.js'></script>
</html>

## main.css

body {
	font-family: sans-serif;
}

#all{
	max-width: 502px;
	margin-left: auto;
	margin-right: auto;
}

canvas{
	border: 1px solid #000;
}

## main.js

var cvs = document.querySelector('canvas');

var w = 512,
	h = 512

cvs.width  = w;
cvs.height = h;

var ctx = cvs.getContext('2d');

var calculate = function(){

	console.time('calculate');

	var pointCount = document.querySelector('input').value;
	var hit = 0;

	var image = ctx.createImageData(w, h);

	for (var i = 0; i < pointCount; i++) {
		var x = Math.random() * w  | 0;
		var y = Math.random() * h | 0;
		var pixelIndex = (w * (y - 1) + x) * 4
		if(Math.hypot(x - w / 2, y - h / 2) < w / 2){
			image.data[pixelIndex + 0]  = 0xFF;
			image.data[pixelIndex + 3] += 0x10;
			hit++;
		}else{
			image.data[pixelIndex + 2]  = 0xFF;
			image.data[pixelIndex + 3] += 0x10;
		}
	};

	ctx.putImageData(image, 0, 0);

	console.timeEnd('calculate');

	return hit / pointCount * 4;

};

document.querySelector('button').addEventListener('click', function(){
	var pi = calculate();
	document.querySelector('span').innerHTML = pi;
}, false);

document.querySelector('span').innerHTML = calculate();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='UTF-8'>
	<link rel='stylesheet' href='./main.css'>
	</head>
	<body>
	<div id='all'>
	<h1>モンテカルロ法による円周率算出</h1>
	<canvas></canvas>
	打つ点の数:
	<input type='number' value='1000'>
	<button>算出</button>
	結果: <span></span>
	</div>
	</body>
	<script src='./main.js'></script>
	</html>

	body {
	font-family: sans-serif;
	}

	#all{
	max-width: 502px;
	margin-left: auto;
	margin-right: auto;
	}

	canvas{
	border: 1px solid #000;
	}

	var cvs = document.querySelector('canvas');

	var w = 512,
	h = 512

	cvs.width = w;
	cvs.height = h;

	var ctx = cvs.getContext('2d');

	var calculate = function(){

	console.time('calculate');

	var pointCount = document.querySelector('input').value;
	var hit = 0;

	var image = ctx.createImageData(w, h);

	for (var i = 0; i < pointCount; i++) {
	var x = Math.random() * w \| 0;
	var y = Math.random() * h \| 0;
	var pixelIndex = (w * (y - 1) + x) * 4
	if(Math.hypot(x - w / 2, y - h / 2) < w / 2){
	image.data[pixelIndex + 0] = 0xFF;
	image.data[pixelIndex + 3] += 0x10;
	hit++;
	}else{
	image.data[pixelIndex + 2] = 0xFF;
	image.data[pixelIndex + 3] += 0x10;
	}
	};

	ctx.putImageData(image, 0, 0);

	console.timeEnd('calculate');

	return hit / pointCount * 4;

	};

	document.querySelector('button').addEventListener('click', function(){
	var pi = calculate();
	document.querySelector('span').innerHTML = pi;
	}, false);

	document.querySelector('span').innerHTML = calculate();