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

Lo mejor que pude hacer con el trinagulo dentro del traingulo...

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 Diseñando una Escuadra

por Jason Alonso Castro Blanco
| 137.6k xp | 41 posts
Font-end dev trainee. 
<body>
    <canvas width="600" height="400">

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

    pincel.fillStyle = "blue"
    pincel.beginPath();
    pincel.moveTo(50,50);
    pincel.lineTo(50,400);
    pincel.lineTo(100,400);
    pincel.lineTo(400,400)
    pincel.fill();

    pincel.fillStyle = "red"
    pincel.beginPath();
    pincel.moveTo(60,100);
    pincel.lineTo(80,120);
    pincel.lineTo(80,350);
    pincel.lineTo(300,350)
    pincel.fill();



</script>
</body>
1 respuesta
solución!
por Estudiante
| 192.1k xp | 107 posts

Hola Jason, te paso tu código con las medidas correctas, comenté tus lineas para que veas donde realicé los cambios.

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

    </canvas>
<script>

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

    pincel.fillStyle = "blue"
    pincel.beginPath();
    pincel.moveTo(50,50);
    pincel.lineTo(50,400);
    //pincel.lineTo(100,400);
    pincel.lineTo(400,400)
    pincel.fill();

    pincel.fillStyle = "red"
    pincel.beginPath();
    pincel.moveTo(100,175); //pincel.moveTo(60,100);
    pincel.lineTo(100,350);  //pincel.lineTo(80,120);
    pincel.lineTo(275,350);  //pincel.lineTo(80,350);
    //pincel.lineTo(300,350)
    pincel.fill();

</script>
</body>

Espero haberte ayudado! Slds.