JavaScript/palette3の編集履歴ソース - Sample is best!

JavaScript/palette3 - (2016/02/12 (金) 18:37:44) のソース

|開発環境|メモ帳|
|実行環境|Microsoft Edge|
#table_zebra(project, #fff, #eee)

http://www.maroon.dti.ne.jp/lance/js/palette3.html
http://www.maroon.dti.ne.jp/lance/js/palette32.html

palette3.html
#highlight(javascript){{
<!doctype html>
<head>
<title>palette3</title>
</head>

<body>
<canvas id="canvas"></canvas>
<script>

main();

function main()
{
	canvas.width = 1000;
	canvas.height = 500;
	var ctx = canvas.getContext("2d");

	ctx.fillStyle = "rgb(0, 0, 0)";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	var data = imageData.data;

	var r = 125;
	var bright = 0x7f;
	circle(data, 164, 300, r, 0, bright, 1, 0, 0);	// r
	circle(data, 250, 150, r, 1, bright, 1, 0, 0);	// g
	circle(data, 336, 300, r, 2, bright, 1, 0, 0);	// b

	var bright = 0xff;
	circle(data, 664, 300, r, 0, bright, 2, 0, 0);	// r
	circle(data, 750, 150, r, 1, bright, 2, 1, 0);	// g
	circle(data, 836, 300, r, 2, bright, 2, 0, 1);	// b

	ctx.putImageData(imageData, 0, 0);
}

function circle(data, cx, cy, r, rgb, bright, step, u, v)
{
	var width = canvas.width;
	var rr = r * r;

	for (var y = -r; y < r; y += step) {
		for (var x = -r; x < r; x += step) {
			if (rr < x * x + y * y) continue;
			data[((cy + y + v) * width + (cx + x + u)) * 4 + rgb] = bright;
		}
	}
}

</script>
</body>
}}

palette32.html
#highlight(javascript){{
<!doctype html>
<head>
<title>palette32</title>
</head>

<body>
<p>
四角形のサイズ
<input id="inpSize" value="4">
<button onclick="draw();">描画</button>
</p>
<canvas id="canvas"></canvas>
<script>

var width = 800;
var height = 600;
var ra = 200;
var rb = 300;
var size;
var ctx = canvas.getContext("2d");

draw();

function draw()
{
	size = parseInt(inpSize.value);
	if (1 <= size) {
	} else {
		alert("1以上の数値を指定してください。");
		return;
	}

	canvas.width = width;
	canvas.height = height;
	ctx.fillStyle = "rgb(0, 0, 0)";
	ctx.fillRect(0, 0, width, height);

	circle("rgb(255, 0, 0)", 0, 0, 210);
	circle("rgb(0, 255, 0)", 1, 0, 90);
	circle("rgb(0, 0, 255)", 0, 1, 330);
}

function circle(color, u, v, angle)
{
	var rad = (angle / 180) * Math.PI;
	var cx = width / 2 + ra * Math.cos(rad);
	var cy = height / 2 - ra * Math.sin(rad);
	var rr = rb * rb;
	var s2 = size * 2;

	ctx.fillStyle = color;
	for (var y = size * v; y < height; y += s2) {
		var py = y - cy;
		for (var x = size * u; x < width; x += s2) {
			var px = x - cx;
			if (rr < px * px + py * py) continue;
			ctx.fillRect(x, y, size, size);
		}
	}
}

</script>
</body>
}}
Sample is best! JavaScript > palette3

JavaScript/palette3 - (2016/02/12 (金) 18:37:44) のソース
