Para facilitar un poco, las dimensiones de nuestros rectángulos (base x altura) en pixeles es el siguiente:
Rectángulo 1: 350, 300 (cabeza). Rectángulos 2 y 3: 90, 90 (ojos). Rectángulo 4: 70, 100 (nariz). Rectángulos 5 y 6: 40, 110 (parte de la boca). Su canvas debe tener el tamaño de 600 x 400 pixeles. ¿Será que consigues ayudar a Bernardo creando el poster con la imagen Creeper? A continuación encontrarás un paso a paso para guiarte mejor:
Crear un nuevo archivo, por ejemplo creeper.html; Definir la etiqueta (tag) canvas Crear un script usando los objetos pantalla y pincel Diseñar los rectángulos a través de la función fillRect del pincel No olvides pintar los rectángulos, aquí usamos los colores darkgreen y black
Solución:
JavaScript (creeper.js):
// Obtener el canvas y el contexto del pincel var canvas = document.getElementById("creeperCanvas"); var pincel = canvas.getContext("2d");
// Definir los colores de relleno para los rectángulos pincel.fillStyle = "darkgreen"; pincel.strokeStyle = "black";
// Dibujar los rectángulos en el canvas pincel.fillRect(125, 50, 350, 300); // Cabeza pincel.strokeRect(125, 50, 350, 300); // Borde de la cabeza pincel.fillRect(180, 120, 90, 90); // Ojo izquierdo pincel.fillRect(330, 120, 90, 90); // Ojo derecho pincel.fillRect(265, 200, 70, 100); // Nariz pincel.fillRect(220, 270, 40, 110); // Parte izquierda de la boca pincel.fillRect(340, 270, 40, 110); // Parte derecha de la boca
Este código creará un canvas de 600 x 400 píxeles con la imagen del Creeper. Los rectángulos se dibujan usando la función fillRect del pincel y se especifican las coordenadas (x, y) y las dimensiones (ancho x alto) de cada rectángulo en píxeles. También se utiliza la función strokeRect para dibujar el borde de la cabeza en color negro.
Espero que esto te ayude a crear el poster que necesitas. Si tienes alguna otra pregunta, no dudes en preguntar.
