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
3
respuestas

[Duda] La cara de Creeper

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Diseñando gráficos con Canvas y actividad La cara de Creeper

por Ricardo Nicolas Arcos Lucero
| 104k xp | 18 posts

Me confirman por favor, como se hizo para sacar cada medida.

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

<script>

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

    //cabeza

    pincel.fillStyle="orange";
    pincel.fillRect(200,50,350,300);

    //ojos

    pincel.fillStyle="black";
    pincel.fillRect(250,110,90,90);
    pincel.fillRect(410,110,90,90);

    //nariz
    pincel.fillRect(340, 200, 70, 100);

    //boca

    pincel.fillRect(300, 240, 40, 110);
    pincel.fillRect(410, 240, 40, 110);

</script>
3 respuestas
por Mauricio Cano Trejo
| 82.2k xp | 4 posts
Coordinador de Inteliencia de Mercado

Tienes que ir haciendo las restas, por ejemplo.

tu la cabeza la hiciste naranja y empezaste en la coordenada 200,50 y su ancho es de 350 x 300 si el primer ojo tiene un ancho de 90 x 90 y la nariz de 70 x 100 tienes un ancho total de 90(un ojo) + 70 (nariz) + 90 (otro ojo) de 250, ese ancho debe estar al centro.

(o sea que a los lados te quedan 50 y 50)

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Con esa premisa el punto inicial del primer ojo debe ser los 200 de coordenada del cuadro verde mas los 50 que tiene de espacio entre el inicio de la cabeza y el inicio del ojo. tu coordenada en x es 250 y en "y" debes hacer la resta de altura de cabeza (300) menos la suma de todos los elementos negros en altura (90 del ojo + la mitad de la nariz 50 + la boca 110) = 250 / eso te da 50 mas los 50 de la coordenada inicial de la cabeza serían 100.

Por lo tanto el ojo izquierdo inicia en 250 (200 de inicio de cabeza más 50) , 100 (50 inicio cabeza en y mas los 50 de la resta)

te agrego la imagen en otra respuesta.

por Mauricio Cano Trejo
| 82.2k xp | 4 posts
Coordinador de Inteliencia de Mercado

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

por Mauricio Cano Trejo
| 82.2k xp | 4 posts
Coordinador de Inteliencia de Mercado

En conclusión tu primer ojo empieza así.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadDe ahi para los siguientes cuadrados solo ve agregando las nuevas distancias para irlos acomodando.

Espero te sirva la respuesta.