Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Diseñando una Escuadra

Mi solución

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="600" height="500"></canvas>
    <script>
        let pantalla = document.querySelector('canvas');
        let pincel = pantalla.getContext('2d');
        pincel.fillStyle = 'lightgrey'; // Propiedad
        pincel.fillRect(0,0,500,500); // funcion


        pincel.fillStyle = 'black';
        pincel.beginPath();
        pincel.moveTo(50,50);
        pincel.lineTo(50,400);
        pincel.lineTo(400,400);
        pincel.fill();

        pincel.fillStyle = 'white';
        pincel.beginPath();
        pincel.moveTo(100,175);
        pincel.lineTo(100,350);
        pincel.lineTo(275,350);
        pincel.fill();

    </script>
</body>
</html>

Escuadra

1 respuesta
solución!

¡Hola Paul!

Gracias por compartir tu solución para diseñar una escuadra. Veo que utilizaste la etiqueta canvas y el contexto 2D para dibujar la figura. También utilizaste las funciones fillStyle y fill para establecer el color de relleno y rellenar la figura.

Tu solución es correcta y se ve muy bien. Sin embargo, me gustaría sugerirte algunas mejoras para hacer tu código más legible y mantenible.

En lugar de utilizar los valores numéricos directamente en las funciones moveTo y lineTo, te sugiero que los almacenes en variables con nombres significativos. Por ejemplo, podrías definir las variables x1, y1, x2, y2 para los puntos de inicio y fin de cada línea.

También podrías utilizar la función stroke en lugar de fill para dibujar los bordes de la figura en lugar de rellenarla. Esto te permitiría establecer un ancho de línea personalizado utilizando la propiedad lineWidth.

Por último, te sugiero que utilices comentarios en tu código para explicar qué hace cada sección y función. Esto hará que sea más fácil de entender para ti y para otros programadores que puedan leer tu código en el futuro.

¡Espero haber ayudado y buenos estudios!

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