2
respuestas

Coordenadas

¿Cómo definen que las coordenadas iniciales son (200, 50, 350 ,300) yo había puesto (0, 0, 350 ,300)

2 respuestas

Hola, creo que es por que se intenta centrar un poco la cara del Creeper, justo al centro del lienzo o área de dibujo. Si comienzas con "0,0" la cara del Creeper se posicionara justo o muy pegadito a la esquina superior izquierda de la pantalla. Y podría resultar mas cómodo agregarle los "200,50".

Siguiendo las coordenadas que indica no queda en el centro, yo lo realice con mis coordenadas; restando y sumando y me quedó mucho más en el centro

   <!--Se define altura y ancho-->
   <canvas width="600" height="420">

   </canvas>

   <script>
      //se crea una variable para recibir la canva creada arriba
      var pantalla = document.querySelector("canvas");
      //Se crea variable que se encarga de dibujar y se define las 2 dimensiones
      var pincel = pantalla.getContext("2d");
      //Se utiliza para definir color del rectangulo
      pincel.fillStyle = "lightgrey";

      //Se utiliza para rellenar el rectangulo
      pincel.fillRect(0,0,600,400);

      pincel.fillStyle = "darkgreen";
      pincel.fillRect(125,50,350,300);
      //ojos
      pincel.fillStyle = "black";
      pincel.fillRect(175,100,90,90);

      pincel.fillStyle = "black";
      pincel.fillRect(335,100,90,90);
      //nariz
      pincel.fillStyle = "black";
      pincel.fillRect(265,190,70,100);

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

      pincel.fillStyle = "black";
      pincel.fillRect(335,240,40,110);
</script>