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

Diseñando flores

Hola, por el momento realicé dos flores, trabajando con el cambio de posiciones, de colores y de tamaño.

Iré mejorando.

Gracias.

<h1>Diseñando flores</h1>

<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, 50, 'blue');
    dibujarCirculo(200, 200, 50, 'purple');
    dibujarCirculo(400, 200, 50, 'orange');
    dibujarCirculo(300, 100, 50, 'black');
    dibujarCirculo(300, 300, 50, 'red')

 Para dejar más prolija el código, ubicar otra función que englobe las cinco llamadas, es decir, la función dibujar circulo llamada por una sola función.
 No requiere parámetros, sólo sirve para llamar
 Nota: Cambio número para denotar la importancia de definir los parámetros usados en los argumentos.*/

    function dibujarFlorGrande() {
        dibujarCirculo(300, 200, 30, 'blue');
        dibujarCirculo(300, 140, 30, 'black');
        dibujarCirculo(300, 260, 30, 'red')
        dibujarCirculo(240, 200, 30, 'violet');
        dibujarCirculo(360, 200, 30, 'orange');
    }

    function dibujarFlorPequeña() {
        dibujarCirculo(500, 300, 16, 'brown');
        dibujarCirculo(500, 268, 16, 'royalblue');
        dibujarCirculo(500, 332, 16, 'gray')
        dibujarCirculo(468, 300, 16, 'aquamarine');
        dibujarCirculo(532, 300, 16, 'orange');
    }

    dibujarFlorGrande();
    dibujarFlorPequeña();

</script>
1 respuesta

Hola Yeimer, espero que esté bien.

Gracias por compartir tu código con nosotros, he probado aquí y el resultado ha sido muy bueno.

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

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