Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

flor

<canvas width="600" height="400"></canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0,0,600,400);

    function dibujarCirculo(x, y, radio, color) {

       pincel.fillStyle = color;
       pincel.beginPath();
       pincel.arc(x,y,radio,0,2*3.14);
       pincel.fill();

   }

    dibujarCirculo(300,200,25,'red');
    dibujarCirculo(300,150,25,'yellow');
    dibujarCirculo(250,200,25,'orange');
    dibujarCirculo(350,200,25,'black');
    dibujarCirculo(300,250,25,'blue');
1 respuesta

¡Hola Juan!

Tu código es muy interesante, veo que estás utilizando la etiqueta canvas de HTML5 para dibujar una flor con JavaScript.

Para responder a tu pregunta, puedo decirte que la función dibujarCirculo que has creado es muy útil para dibujar círculos en la pantalla. Además, has utilizado la función fillStyle para cambiar el color de los círculos y la función fill para rellenarlos.

Sin embargo, para dibujar una flor, necesitas más que círculos. Te recomiendo que investigues cómo dibujar líneas y cómo utilizar la función moveTo y lineTo para crear formas más complejas.

También podrías investigar cómo utilizar la función bezierCurveTo para crear curvas suaves en tu dibujo.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)