确定圆上的所有点#Javascript

Question

I want draw something like this in javascript:

Example:
The bigger circle: r = 5

What do I want to do? to position circles by forming a circle

My questions are (I would like to know):

1. How much points can I draw on a circle if I know the ray,
   the distance between each circle and the radius of each circle?

2. How can I find the position of each circle (to draw automatically)?

3. Like the question 1 but the circles do not have the same radius .

Thank you!

Answer 1

Using HTML Canvas and a bit of trigonometry Create a reusable circles() function and pass the desired arguments for Number of circles, Size, Radius distance from center, Color:

 const ctx = document.getElementById('canvas').getContext('2d'); const cvsSize = 400; const deg2rad = d => d * (Math.PI / 180); ctx.canvas.width = cvsSize; ctx.canvas.height = cvsSize; function circles(tot, rad, dist, color) { const deg = 360 / tot; // Subdivision in degrees let d = 0; // Start at degree (0=east) for (let i = 0; i < tot; i++) { const x = dist * Math.cos(deg2rad(d)) + (cvsSize / 2); const y = dist * Math.sin(deg2rad(d)) + (cvsSize / 2); ctx.beginPath(); ctx.arc(x, y, rad, 0, Math.PI * 2, false); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); d += deg; } } // Total circles, Radius size, Distance from center, Color circles(3, 5, 10, '#f0b'); circles(10, 8, 50, '#0bf'); circles(17, 10, 90, '#bf0'); circles(21, 15, 140, '#b0f'); 

 <canvas id="canvas"></canvas>