O cálculo está certo? | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por David Eler

| 48.6k xp | 10 posts

<meta charset="utf-8">
<canvas id="canvas" width="700" height="500"></canvas>

<script>

    var tela = document.getElementById("canvas");
    var pincel = tela.getContext("2d");

    function desenhaEsquadro(xa, ya, xc, yc, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(xa, ya);
        pincel.lineTo(xa, yc);
        pincel.lineTo(xc, yc);
        pincel.fill();

        pincel.fillStyle = "white";
        pincel.beginPath();
        pincel.moveTo(2 * xa, (xa / 2) * 8);
        pincel.lineTo(2 * xa, (yc / 8) * 7);
        pincel.lineTo((xc / 16) * 11, (yc / 8) * 7);
        pincel.fill();
    }

    desenhaEsquadro(50, 50, 400, 400, "black");

</script>

2 respostas

por Cida Silveira

| 57.6k xp | 41 posts

Owner

25/08/2020

Esta e a formula matematica para gerar o tringula do meio.

function desenhaEsquadro(xa, ya, xc, yc, cor) {

pincel.fillStyle = cor
pincel.beginPath();
pincel.moveTo(xa, ya);
pincel.lineTo(xa,yc);
pincel.lineTo(xc, yc);
pincel.fill();

pincel.fillStyle = 'white'
pincel.beginPath();
pincel.moveTo((6*xa + xc)/7, (9*ya + 5*yc)/14);
pincel.lineTo((6*xa + xc)/7,(ya + 6*yc)/7);
pincel.lineTo((5*xa + 9*xc)/14, (ya + 6*yc)/7);
pincel.fill();

}

solução!

por Cássio Murilo

| 1275.1k xp | 2204 posts

Instrutor Agile Master

25/08/2020

Fala, David! Tudo bem contigo?

Eu faria somente uma alteração em (xc / 16) * 11 para (xc / 16) * 10. Acredito que fica alinhado ;-)

pincel.fillStyle = "white";
pincel.beginPath();
pincel.moveTo(2 * xa, (xa / 2) * 8);
pincel.lineTo(2 * xa, (yc / 8) * 7);
pincel.lineTo((xc / 16) * 10, (yc / 8) * 7);
pincel.fill();

Faça esse teste!!!

Parabéns por ter encontrado outro caminho e compartilhado conosco!!!

Um abraço e bons estudos, David!