Entrar ¿Aún no tienes acceso?
3
respuestas

[Sugerencia] Mi humilde aporte, no es mucho, pero es trabajo honesto...

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 Silvina Danisa Moreno
| 30k xp | 1 posts
Back Office 
<html>
    <header>
        <meta charset="UTF-8">
        <title>Canvas</title>
    </header>
    <body>
        <canvas width="600" height="600"></canvas>
        <script>
            var pizarra = document.querySelector("canvas");
            var pincel = pizarra.getContext("2d");

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

            /*OJOS*/

            pincel.fillStyle = "black";
            pincel.fillRect(75,100,150,150);       

            pincel.fillStyle = "black";
            pincel.fillRect(375,100,150,150);      

            /*BOCA*/

            pincel.fillStyle = "black";
            pincel.fillRect(225,250,150,200);      
            pincel.fillStyle = "black";
            pincel.fillRect(120,325,125,125);       
            pincel.fillStyle = "black";
            pincel.fillRect(370,325,125,125);       


            /*NARIZ*/

            pincel.fillStyle = "black";
            pincel.fillRect(120,450,125,150);       

            pincel.fillStyle = "black";
            pincel.fillRect(370,450,125,150);   


        </script>
    </body>
</html>
3 respuestas
por Miguel Angel Pineda Balanta
| 53.7k xp | 106 posts
Ingeniero de desarrollo

Hola compañero genial tu codigo, yo tambien comparto el mio aqui :3 

<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);

    pincel.fillStyle = "darkgreen";
    pincel.fillRect(125,35,350,300); //1

    pincel.fillStyle = "black";
    pincel.fillRect(175,95,90,90); //2

    pincel.fillStyle = "black";
    pincel.fillRect(335,95,90,90); //3

    pincel.fillStyle = "black";
    pincel.fillRect(265,185,70,100); //4

    pincel.fillStyle = "black";
    pincel.fillRect(225,225,40,110); //5 

    pincel.fillStyle = "black";
    pincel.fillRect(335,225,40,110); //6

</script>
por Veronica Ivana Kostich
| 40.3k xp | 1 posts

Hola Silvina,

Te quedó genial!!

por Luma
| 151.8k xp | 5 posts

Genial chicos, muy lindos trabajos. Comparto el mío.

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

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

//Dibujamos los rectángulos
//Cara
pincel.fillStyle="darkgreen";//seleccionamos primero color
pincel.fillRect(125,50,350,300);

//Ojo izq
pincel.fillStyle="black";
pincel.fillRect(175,110,90,90);

//Ojo dcho
pincel.fillStyle="black";
pincel.fillRect(335,110,90,90);

//Nariz
pincel.fillStyle="black";
pincel.fillRect(265,200,70,100);

//Parte boca izq
pincel.fillStyle="black";
pincel.fillRect(225,240,40,110);

//Parte boca dcha
pincel.fillStyle="black";
pincel.fillRect(335,240,40,110);

</script>