flor animada
Aquí te muestro un ejemplo básico de cómo crear una flor animada en JavaScript utilizando HTML5 Canvas: **HTML** ```html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flor Animada</title> <style> #canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script src="script.js"></script> </body> </html> ``` **JavaScript (script.js)** ```javascript // Obtener el canvas const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Definir las propiedades de la flor const flor = { x: canvas.width / 2, y: canvas.height / 2, radio: 50, color: 'red', velocidad: 2, angulo: 0 }; // Dibujar la flor function dibujarFlor() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(flor.x, flor.y, flor.radio, 0, Math.PI * 2); ctx.fillStyle = flor.color; ctx.fill(); } // Animar la flor function animarFlor() { flor.angulo += flor.velocidad; flor.x = canvas.width / 2 + Math.cos(flor.angulo) * flor.radio; flor.y = canvas.height / 2 + Math.sin(flor.angulo) * flor.radio; dibujarFlor(); requestAnimationFrame(animarFlor); } // Iniciar la animación animarFlor(); ``` En este ejemplo, creamos un canvas en el HTML y obtenemos el contexto 2D para dibujar en él. Luego, definimos las propiedades de la flor, como su posición, radio, color y velocidad. La función `dibujarFlor` se encarga de dibujar la flor en el canvas, utilizando el contexto 2D para crear un círculo con el color y radio definidos. La función `animarFlor` se encarga de animar la flor, actualizando su posición y ángulo en cada iteración, y llamando a la función `dibujarFlor` para refrescar la imagen en el canvas. Finalmente, llamamos a la función `animarFlor` para iniciar la animación. **Nota:** Este es un ejemplo básico y puedes personalizarlo según tus necesidades. También puedes agregar más características a la flor, como cambiar de color o tamaño en función de la velocidad o la posición.