Entrar Ainda não tem acesso?
6
respostas

Solução diferente do professor, porém funcional!

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Esquadro #2

por Rafael Pereira dos Santos
| 12.6k xp | 7 posts
Repositor 
<!-- esquadro.html -->

<canvas width="600" height="400"></canvas>
<script>

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

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    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(xa + 50, ya + 125);
    pincel.lineTo(xa + 50, yc - 50);
    pincel.lineTo(xc - 125, yc - 50);
    pincel.fill();

}

    desenhaEsquadro(50, 50, 400, 400, "black");    
</script>
6 respostas
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Rafael

Muito bom! Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.

por Marie
| 100.9k xp | 25 posts

Vou testar aquu!!!

por Bruno Manzini Silva Ishimoto
| 47k xp | 13 posts
Representante comercial

O raciocinio foi muito bom, mas estava testando e com valores com diferenças mais altas entre si, tende a ter alguns problemas.

por ex: testei com 78, 56, 245, 680 (tive q aumentar o height para 700) e ele acaba nao gerando uma forma de esquadro, ai testei com o codigo do Flavio e funcionou.

Nao estou querendo criticar e nem sem estraga prazeres, a ideia foi boa e realmente funcional para a aula em questao, mas se for usar em projetos futuros, talvez seja necessario rever.

por Marie
| 100.9k xp | 25 posts

Bruno vou testar como descreveu!,

por Rafael Pereira dos Santos
| 12.6k xp | 7 posts
Repositor

Verdade Bruno, testei aqui e realmente precisa de umas mudanças, quando eu vi a resposta do professor, eu não entendi nada, futuramente pretendo mudar, obrigado por testar! :)

por Ítalo Alves Rissardi Ferreira
| 172.3k xp | 31 posts

Nossa, fiz exatamente igual!!

E fiquei testando aqui os valores, descobri que desse modo, ele só funciona com xc e yc > 250 (que é o dobro do valor que vai somar em yc). Testei com valores mais altos as únicas questões que achei é que o esquadro vai ficando mais fino, por conta das operações com os valores fixos e precisa ajustar o tamanho do canvas pra caber o esquadro. Testei, por exemplo : <canvas width="1000" height="1000"></canvas> e executei desenhaEsquadro(50, 50, 1000, 1000); e funcionou.

Reconheço que é um código muito menos genérico autônomo do que o apresentado pelo professor, justamente por conta desses números fixos que acabam deixando ele menos automatizado.