5
respostas

Dúvida no exercício...

como o instrutor diz que simplificou o código fazendo isso...

<script>

    var tela = document.querySelector('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((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();

}

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

</script>
5 respostas

Oi Jônatas

Olhando somente este exemplo realmente não parece que simplificou, mas se você executar a função mais uma vez com valores diferentes você já verá que ficou mais simples de criar outro esquadro.

  desenhaEsquadro(50, 50, 400, 400, 'red');
  desenhaEsquadro(20, 20, 200, 200, 'black');

A vantagem está na execução do mesmo código, a função é justamente isso, um centralizador de código com suas regras definidas.

Olá! Acabei de fazer o exercício e a minha dúvida foi exatamente essa, Guilherme... Eu só chamei a função passando os novos parâmetros e pra mim deu certo. Porém quando vi a resolução do exercício fiquei meio "bugado" achando que tivesse errado alguma coisa...

O meu ficou assim:

Oi Moisés

Para compartilhar o código você precisa utilizar a ferramenta </> (inserir bloco de código) aqui do editor e inserir o código entre as crases.

normalmente não olho o código do instrutor, mas fiz esse o mais limpo possivel e comentado, a milhões de formas de chegar ao mesmo resultado quando mais inchuta melhor.

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

<script>
//criando a função para desenhar esquadro
    function desenhaEsquadro (xa, ya, xc, yc, cor){ //recebemos coordenadas que desenhariam a hipotenusa, apartir dela temos o ponto que cria os catetos
        var tela = document.querySelector("canvas");//trazendo canva para o html
        var pincel = tela.getContext("2d"); //criando um pincel em 2d

        pincel.fillStyle = cor ; //atribuindo uma cor ao pincel
        pincel.beginPath(); //criando um novo caminho para desenhar
        pincel.moveTo(xa, ya); // dando as coordenadas de para onde o pincel deve se posicionar
        pincel.lineTo(xc, yc); //para onde o pincel deve se mover
        pincel.lineTo(xa, yc); //uso agora as coordenadas xa e yc para gerar um novo ponto criando um triangulo
        pincel.fill(); //preenchendo esse triangulo com cor
    }
    desenhaEsquadro(50,50,400,400, "black"); //fazendo a chamada
    desenhaEsquadro(100,175,275,350, "white"); //fazendo a chamada

    //código simples, me sigam no instagram:felipednew precisando de ajuda so chamar.
</script>

Oi Felipe

Muito bom! Comentários ajudam muito no estudo!

Parabéns pelo empenho nos estudos!

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