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

Cabeza de Creeper

<meta charset = "utf-8">
<canvas width="600" height="400"> </canvas>

<script>

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

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


    //cabeza 1

    pincel.fillStyle = "darkgreen";
    pincel.beginPath();
    pincel.moveTo(125,50);
    pincel.lineTo(125,350);
    pincel.lineTo(475,350);
    pincel.lineTo(475,50);
    pincel.fill();

    // boca 5

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(225,350);
    pincel.lineTo(225,240);
    pincel.lineTo(265,240);
    pincel.lineTo(265,350);
    pincel.fill();

    //boca 6
    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(335,350);
    pincel.lineTo(335,240);
    pincel.lineTo(375,240);
    pincel.lineTo(375,350);
    pincel.fill();

    //nariz 4

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(265,300);
    pincel.lineTo(265,200);
    pincel.lineTo(335,200);
    pincel.lineTo(335,300);
    pincel.fill();

    //ojo 2

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(265,200);
    pincel.lineTo(175,200);
    pincel.lineTo(175,110);
    pincel.lineTo(265,110);
    pincel.fill();

    //ojo 3

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(335,200);
    pincel.lineTo(335,110);
    pincel.lineTo(425,110);
    pincel.lineTo(425,200);
    pincel.fill();


</script>
1 respuesta

¡Hola Estudiante!

El código que compartiste es un ejemplo de cómo dibujar la cabeza de un Creeper en un canvas utilizando JavaScript. El código utiliza el objeto canvas y su contexto 2D para dibujar formas y figuras en la pantalla.

La función fillRect se utiliza para dibujar un rectángulo blanco en el canvas y establecer un fondo para la imagen. Luego, se utilizan las funciones moveTo y lineTo para dibujar las diferentes partes de la cabeza del Creeper, como la boca, la nariz y los ojos.

Es importante mencionar que este código solo dibuja la cabeza de un Creeper y no tiene interacción con el usuario. Si deseas agregar interactividad, deberás agregar eventos de mouse o teclado al canvas.

Espero que esto te haya ayudado a entender un poco más sobre cómo dibujar en un canvas utilizando JavaScript. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)