Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[MEJORA] Diseñando una Flor

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Utilizando funciones y actividad Diseñando una flor

por Sebastián Millán Higuita
| 81.8k xp | 11 posts
Diseñador y Desarrollador Web

He propuesto una mejora del código para dibujar la flor, haciendo que adicional a la posición, también pueda ser dinámico su tamaño sin que se altere su distribución y forma.

<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 * Math.PI);
        pincel.fill();

      }

      function dibujarFlor(x, y, r) {

        dibujarCirculo(x, y, r, "red");
        dibujarCirculo(x+r*2, y, r, "black");
        dibujarCirculo(x-r*2, y, r, "orange");
        dibujarCirculo(x, y-r*2, r, "yellow");
        dibujarCirculo(x, y+r*2, r, "blue");

      }

      dibujarFlor(300, 200, 30);
      dibujarFlor(100, 80, 15);

    </script>
1 respuesta
por OmarEfraínOliveraRamírez
| 91.1k xp | 48 posts

Yo dibujé un lindo jardín Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad 

<html>
    <h1 style="text-align: center;">Mi Jardín</h1>
</html>
<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();
    }

    function dibujarFlor(x,y){
        dibujarCirculo(x, y+20, 10, "blue");
        dibujarCirculo(x, y, 10, "red");
        dibujarCirculo(x, y-20, 10, "yellow");
        dibujarCirculo(x-20, y, 10, "orange");
        dibujarCirculo(x+20, y, 10, "black");
    }

    function dibujarTallo(x,y,color){
    pincel.fillStyle = color;
    pincel.fillRect(x,y,10,100);
    pincel.strokeStyle= "black";
    // pincel.strokeRect(x,y,50,50);
    }


    dibujarFlor(300,200);
    dibujarTallo(294,230,"green");

    dibujarFlor(200,200);
    dibujarTallo(95,230, "green");
    dibujarFlor(100,200);
    dibujarTallo(195,230,"green");
    dibujarFlor(400,200);
    dibujarTallo(395,230,"green");

</script>