@akeem
Чтобы создать интерактивную анимацию на Canvas, нужно использовать JavaScript для управления анимацией и обработки пользовательских действий. Вот примерный план действий:
Здесь нет конкретного рецепта, как делать интерактивную анимацию на Canvas, но данный план поможет вам начать реализацию своей идеи.
@akeem
Ниже приведен пример простой интерактивной анимации на Canvas, используя HTML, CSS и JavaScript:
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 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Animation</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let x = canvas.width / 2; let y = canvas.height / 2; let dx = 2; let dy = -2; let ballRadius = 20; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function updatePosition() { clearCanvas(); drawBall(); x += dx; y += dy; if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { dx = -dx; } if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { dy = -dy; } } function mouseMoveHandler(e) { const rect = canvas.getBoundingClientRect(); x = e.clientX - rect.left; y = e.clientY - rect.top; } document.addEventListener("mousemove", mouseMoveHandler); setInterval(updatePosition, 10); </script> </body> </html> |
В этом примере у нас есть шарик, который движется по Canvas, а также реагирует на движение мыши пользователя. Вы можете продолжить расширять этот пример, добавляя новые элементы, анимации и интерактивные функциональности.