ikr7/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>マンデルブロくん</title>
	<style>

body {
	margin:0;
	overflow:hidden
}

div {
	position: fixed;
	width: 100%;
	background: rgba(255, 255, 255, 0.2);
	color: white;
}

	</style>
</head>
<body>
<div>左/右クリックでその辺りにズームイン/アウトするよ　クリックする場所によっては時間がかかるかもしれないけど気長に待ってね</div>
<canvas></canvas>
<script>

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

var W = Math.max(
	document.body.clientWidth,
	document.body.scrollWidth,
	document.documentElement.scrollWidth,
	document.documentElement.clientWidth
);

var H = Math.max(
	document.body.clientHeight,
	document.body.scrollHeight,
	document.documentElement.scrollHeight,
	document.documentElement.clientHeight
);

var MAX = 256;

canvas.width = W;
canvas.height = H;

var point = function (i, x, y, b) {
	var index = (W * y + x) << 2;
	i.data[index + 0] = b;
	i.data[index + 1] = b;
	i.data[index + 2] = b;
	i.data[index + 3] = 0xFF;
};

var mand = function (a, b) {
	var x = 0, y = 0, x1, y1;
	for (var n = 1; n < MAX; n++) {
		x1 = x * x - y * y - a;
		y1 = ((x * y) * 2) - b;
		if (x1 * x1 + y1 * y1 > 4) return (n << 8) / 0xFF;
		x = x1;
		y = y1;
	}
	return 0;
};

var z = 4;

var view_w;
var view_h;
var view_x = 0;
var view_y = 0;

var draw = function (clickX, clickY, zin) {

	var i = context.createImageData(canvas.width, canvas.height);

	if (zin) {
		z *= (7 / 10);
	} else {
		z *= (10 / 7);
	}

	view_w = z;
	view_h = z * (H / W);
	view_x = view_x + clickX * (view_w / W) - view_w / 2;
	view_y = view_y + clickY * (view_h / H) - view_h / 2;

	for (var y = 0; y < H; y++) {
		for (var x = 0; x < W; x++) {
			var ax = x * (view_w / W) + view_x - view_w / 2;
			var ay = y * (view_h / H) + view_y - view_h / 2;
			point(i, x, y, mand(ax, ay));
		}
	}

	context.putImageData(i, 0, 0);

};

canvas.addEventListener('click', function (e) {
	var x = e.clientX;
	var y = e.clientY;
	draw(x, y, true);
});

canvas.addEventListener('contextmenu', function (e) {
	e.preventDefault();
	var x = e.clientX;
	var y = e.clientY;
	draw(x, y, false);
});

draw(W / 2 + 400, H / 2, true);

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>マンデルブロくん</title>
	<style>

	body {
	margin:0;
	overflow:hidden
	}

	div {
	position: fixed;
	width: 100%;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	}

	</style>
	</head>
	<body>
	<div>左/右クリックでその辺りにズームイン/アウトするよ　クリックする場所によっては時間がかかるかもしれないけど気長に待ってね</div>
	<canvas></canvas>
	<script>

	var canvas = document.querySelector('canvas');
	var context = canvas.getContext('2d');

	var W = Math.max(
	document.body.clientWidth,
	document.body.scrollWidth,
	document.documentElement.scrollWidth,
	document.documentElement.clientWidth
	);

	var H = Math.max(
	document.body.clientHeight,
	document.body.scrollHeight,
	document.documentElement.scrollHeight,
	document.documentElement.clientHeight
	);

	var MAX = 256;

	canvas.width = W;
	canvas.height = H;

	var point = function (i, x, y, b) {
	var index = (W * y + x) << 2;
	i.data[index + 0] = b;
	i.data[index + 1] = b;
	i.data[index + 2] = b;
	i.data[index + 3] = 0xFF;
	};

	var mand = function (a, b) {
	var x = 0, y = 0, x1, y1;
	for (var n = 1; n < MAX; n++) {
	x1 = x * x - y * y - a;
	y1 = ((x * y) * 2) - b;
	if (x1 * x1 + y1 * y1 > 4) return (n << 8) / 0xFF;
	x = x1;
	y = y1;
	}
	return 0;
	};

	var z = 4;

	var view_w;
	var view_h;
	var view_x = 0;
	var view_y = 0;

	var draw = function (clickX, clickY, zin) {

	var i = context.createImageData(canvas.width, canvas.height);

	if (zin) {
	z *= (7 / 10);
	} else {
	z *= (10 / 7);
	}

	view_w = z;
	view_h = z * (H / W);
	view_x = view_x + clickX * (view_w / W) - view_w / 2;
	view_y = view_y + clickY * (view_h / H) - view_h / 2;

	for (var y = 0; y < H; y++) {
	for (var x = 0; x < W; x++) {
	var ax = x * (view_w / W) + view_x - view_w / 2;
	var ay = y * (view_h / H) + view_y - view_h / 2;
	point(i, x, y, mand(ax, ay));
	}
	}

	context.putImageData(i, 0, 0);

	};

	canvas.addEventListener('click', function (e) {
	var x = e.clientX;
	var y = e.clientY;
	draw(x, y, true);
	});

	canvas.addEventListener('contextmenu', function (e) {
	e.preventDefault();
	var x = e.clientX;
	var y = e.clientY;
	draw(x, y, false);
	});

	draw(W / 2 + 400, H / 2, true);

	</script>
	</body>
	</html>