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

PUDE HACERLO

COSTÓ LLEGAR AL RESULTADO PORQUE TUVE QUE PENSAR CÓMO UBICAR LAS COORDENADAS. LO ESCRIBÍ EN UN PAPEL Y FUI HACIÉNDOLO A LA PAR.

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400);

    pincel.fillStyle = "green";
    pincel.fillRect(125,50,350,300);

     pincel.fillStyle = "black";
    pincel.fillRect(175,105,90,90);

    pincel.fillStyle = "black";
    pincel.fillRect(335,105,90,90);

    pincel.fillStyle = "black";
    pincel.fillRect(265,195,70,100);

    pincel.fillStyle = "black";
    pincel.fillRect(225,250,40,100);

    pincel.fillStyle = "black";
    pincel.fillRect(335,250,40,100);
</script>

ASÍ QUEDÓ Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta

Pues te quedó muy cool compañero, he observado animaciones y dibujos en el canvas muy complejos pero estoy seguro que todos en algún momento pasaron por aquí. Lo admito en lo personal me siento un niño feliz cuando dibujo en el canvas a puro código.