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

Escuadra

<meta charset="utf-8">
<canvas width =600 px, heigth=400px>
</canvas>
<script>
      var pantalla = document.querySelector('canvas');
      var pincel     = document.getContext('2d');

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

      //trangulo negro
      pincel.fillStyle = "black";
      pincel.beginPath();
      pincel.moveTo(50,50);
      pincel.lineTo(50,400);
      pincel.lineTo(450,400);
      pincel.fill();
      pincel.fillStyle = "white";
      pincel.beginPath();
      pincel.moveTo(100,150);
      pincel.lineTo(100,300);
      pincel.lineTo(200,300);
      pincel.fill();

1 respuesta

¡Hola Daniel!

En tu código, estás creando un canvas con un ancho de 600px y un alto de 400px. Luego, estás dibujando un rectángulo verde en toda la pantalla. Después, estás dibujando un triángulo negro y un triángulo blanco encima del rectángulo verde.

Si tu pregunta es sobre cómo hacer una escuadra en el canvas, te sugiero que agregues más código para dibujar la escuadra. Puedes hacerlo utilizando la función lineTo() para dibujar líneas rectas y stroke() para trazar las líneas. Aquí te dejo un ejemplo de cómo podrías hacerlo:

// Escuadra
pincel.strokeStyle = "red";
pincel.lineWidth = 5;
pincel.beginPath();
pincel.moveTo(100, 100);
pincel.lineTo(100, 300);
pincel.lineTo(300, 300);
pincel.stroke();

Este código dibujará una escuadra roja con un ancho de línea de 5 píxeles. Puedes ajustar los valores de moveTo() y lineTo() para cambiar la posición y el tamaño de la escuadra.

¡Espero haber ayudado y buenos estudios!