@rebekah
Для создания эффекта частиц на Canvas вам потребуется использовать JavaScript и HTML.
Вот пример кода, который создает эффект частиц на Canvas:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Particle Effect</title> </head> <body> <canvas id="canvas"></canvas> <script src="script.js"></script> </body> </html> |
JavaScript (script.js):
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const particles = []; class Particle { constructor(x, y, radius, color) { this.x = x; this.y = y; this.radius = radius; this.color = color; this.velocity = { x: Math.random() * 2 - 1, y: Math.random() * 2 - 1 }; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); } update() { this.draw(); this.x += this.velocity.x; this.y += this.velocity.y; if (this.x + this.radius > canvas.width || this.x - this.radius < 0) { this.velocity.x = -this.velocity.x; } if (this.y + this.radius > canvas.height || this.y - this.radius < 0) { this.velocity.y = -this.velocity.y; } } } function init() { for (let i = 0; i < 100; i++) { const radius = Math.random() * 3 + 1; particles.push(new Particle(canvas.width / 2, canvas.height / 2, radius, 'blue')); } } function animate() { requestAnimationFrame(animate); ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(particle => { particle.update(); }); } init(); animate(); |
Запустив данный код, вы увидите эффект частиц на Canvas, где частицы случайно двигаются по экрану и отражаются от границ холста. Можете вносить изменения в параметры частиц (цвет, скорость, размер и другие параметры) и настраивать эффект по вашему усмотрению.