| 開発環境 |
メモ帳 |
| 実行環境 |
Microsoft Edge |
palette3.html
<!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
<!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>
最終更新：2016年02月12日 18:37
