Каким образом реализовать эффект распыления на Canvas?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function drawParticles(ctx, numParticles, centerX, centerY, maxRadius, colors) {
  for (let i = 0; i < numParticles; i++) {
    const radius = Math.random() * maxRadius;
    const color = colors[Math.floor(Math.random() * colors.length)];
    const angle = Math.random() * Math.PI * 2;
    const x = centerX + Math.sin(angle) * radius;
    const y = centerY + Math.cos(angle) * radius;

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
  }
}

// Пример использования функции
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const numParticles = 100;
const maxRadius = 10;
const colors = ['#ff0000', '#00ff00', '#0000ff', '#fff000', '#00fff0', '#ff00ff'];

drawParticles(ctx, numParticles, centerX, centerY, maxRadius, colors);