2
respuestas

La cara de Creeper

Mi creeper quedo de esta manera, inicie el rectangulo de la cabeza en la posicion (0,0) y por eso las coordenadas me quedaron distintas. Calculo que le paso a mas gente y no solo a mi? jaja.. Saludos!

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

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


    pincel.fillStyle = "darkgreen"; //cabeza 1
    pincel.fillRect(0,0,350,300);    

    pincel.fillStyle = "black"; // ojos 2
    pincel.fillRect(50,50,90,90);

    pincel.fillStyle = "black"; // ojos 3
    pincel.fillRect(210,50,90,90);

    pincel.fillStyle = "black"; // nariz 4
    pincel.fillRect(140,140,70,100);

    pincel.fillStyle = "black"; // parte de la boca 5 
    pincel.fillRect(100,190,40,110);

    pincel.fillStyle = "black"; // parte de la boca 6 
    pincel.fillRect(205,190,40,110);



</script>
2 respuestas

Hola, a mi también me quedó con otras coordenadas pero tranqui eso no es inconveniente porque no especificaba el punto de origen. Quería compartirte un dato: si tus figuras tendrán el mismo color, como por ejemplo, los ojos, nariz y boca, no haría falta que en cada uno de ellos indiques el color, con que lo hagas con el 1ro de ellos y las otras figuras del mismo color las coloques en las siguiente filas va a tomar el mismo color. Te muestro con tu código por si no me expliqué bien:

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

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

    pincel.fillStyle = "darkgreen"; //cabeza 1
    pincel.fillRect(0,0,350,300);    

    pincel.fillStyle = "black"; // ojos 2
    pincel.fillRect(50,50,90,90);

    // ojos 3, nariz 4, parte de la boca 5 y 6 
    // comparten el mismo color 'black', 
    // que ya fue definido en ojos 2, entonces no haría falta
    // volver a repetir la línea pincel.fillStyle = "black";

    // ojos 3
    pincel.fillRect(210,50,90,90);

    // nariz 4
    pincel.fillRect(140,140,70,100);

    // parte de la boca 5 
    pincel.fillRect(100,190,40,110);

    // parte de la boca 6 
    pincel.fillRect(205,190,40,110);

</script>

Hola Jose muchas gracias por tu recomendacion, lo entendi a la perfeccion! Saludos!