<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas style="border: 1px solid grey" id="canvas"></canvas>
</body>
</html>const WIDTH = 300;
const HEIGHT = 300;
const canvas = document.getElementById('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;
const ctx = canvas.getContext('2d');
const n = 10;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
ctx.beginPath();
ctx.ellipse(100, 100, 50, 90, Math.PI / 2, 0, 2 * Math.PI);
ctx.stroke();
for (let i = 0; i < n; i++){
let x = getRandom(50,150);
let y = getRandom(50,150);
ctx.rect(x, y, 2,2);
ctx.stroke();
}
const WIDTH = 300;
const HEIGHT = 300;
const canvas = document.getElementById('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;
const ctx = canvas.getContext('2d');
const
X = 100,
Y = 100,
A = 90,
B = 50;
const
N = 1000,
SIDE = 4,
HALF_SIDE = SIDE / 2;
const rand = (min, max) => Math.random() * (max - min) + min;
ctx.beginPath();
ctx.ellipse(X, Y, B, A, Math.PI / 2, 0, 2 * Math.PI);
ctx.stroke();
for (let i = 0; i < N; i++) {
const
x = rand(-A + HALF_SIDE, A - HALF_SIDE),
maxAbsY = (B - HALF_SIDE) / A * Math.sqrt(A * A - x * x),
y = rand(-maxAbsY, maxAbsY);
ctx.beginPath();
ctx.rect(x + X - HALF_SIDE, y + Y - HALF_SIDE, SIDE, SIDE);
ctx.stroke();
}
Простой
Простой
Средний
Простой
