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
1
respuesta

Creeper comparto mi código cualquier corrección favor comentármelo.

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 Johanny Agustín Valdez Almanzar
| 43.9k xp | 8 posts
<canvas width="600" height="400"> </canvas>

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


    pincel.fillStyle = "darkgreen";   //propiedad
    pincel.fillRect(0,0,350,300);  //función

    pincel.fillStyle = "black";   //propiedad
    pincel.fillRect(45,45,90,90);  //función

    pincel.fillStyle = "black";   //propiedad
    pincel.fillRect(205,45,90,90);  //función

    pincel.fillStyle = "black";   //propiedad
    pincel.fillRect(135,135,70,100);  //función

    pincel.fillStyle = "black";   //propiedad
    pincel.fillRect(95,190,40,110);  //función

    pincel.fillStyle = "black";   //propiedad
    pincel.fillRect(200,190,40,110);  //función


</script>

<h3>Diseñado by Johanny Valdez</h3>
1 respuesta
por Raúl Alexis Sanchez
| 8.3k xp | 7 posts

Buenas, podrias optimizar y ahorrar varias lineas a tu codigo al no repetir pincel.fillStyle = "black" ya que con una sola vez es suficiente. Saludos

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    //cabeza
    pincel.fillStyle = 'darkgreen';
    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>