Entrar Ainda não tem acesso?
2
respostas

Não entendi foi a resolução

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 Bruno Capra Bell
| 15.2k xp | 38 posts

O meu funcionou do mesmo jeito, porém não entendi a resolução do prof

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

<script>

function desenhaEsquadro(xa, ya, xc, yc, cor) {
    //a implementacao fica com vc :)


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

    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();

    }

        desenhaEsquadro(50, 50, 400, 400, 'red');
        desenhaEsquadro(20, 20, 200, 200, 'black');
</script>
2 respostas
por Felipe Dina Pereira
| 25.5k xp | 68 posts

basicamente tu vai melhorar o código criando uma função mas ao invés de receber 6 coordenadas "xa,xb,xc e ya,yb,yc" ela receberar só 4 coordenadas "xa,ya e xc , yc" nesse caso vamos usar o valor de xa e yc para fazer o que seria "xb e yb", no plano cartesiano eles teriam o mesmo valor nos seus respectivos eixos. Ele pede isso para que façamos um código mais limpo. Se não entendeu faça a pergunta que lhe responderei. vou deixar esse código comentado para ti ajudar, abraço.

<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>
por Estudante
| 14.9k xp | 2 posts

a resolução é mais uma formula para que vc não precise calcular o valor de cada posição do esquadro menor, fica fácil pra gente escolher a forma simples quando temos a resposta, mais quando vc não tem os valores, a formula é muito pratica.