<!-- esquadro.html -->
<canvas width="600" height="400"></canvas>
<script>
var esquadro1=[50,400]
var esquadro2=[100,175]
var cor=["black","white"]
function desenhaEsquadro(xa,ya,xc,yc,xb,yb,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();
}
desenhaEsquadro(esquadro1[0],esquadro1[0],esquadro1[1],esquadro1[1],esquadro1[0],esquadro1[1], cor[0]);
desenhaEsquadro(esquadro2[0],esquadro2[1],esquadro2[0]+esquadro2[1],esquadro2[1]+esquadro2[1],esquadro2[0],esquadro2[1]+esquadro2[1], cor[1]);
</script>
1
resposta
resposta
Fiz de uma forma diferente, ta certo?
Oi Marco Antonio,
O esquadro necessita dos 2 triângulos (o preto e o branco) para ficar visivelmente completo, para que a função fique completa você precisa criar todas as regras dentro dela.
A sua resolução obteve a resposta visual correta mas você precisou chamar a função 2 vezes passando as regras pelos parâmetros alem de repetir os valores, isso pode gerar problemas futuros se alguém sem conhecimento do código for dar manutenção por exemplo.
Pensando na sua ideia e abstraindo um pouco mais você poderia mudar o nome da função de desenhaEsquadro para desenhaTrianguloRetangulo, assim fica perceptível que a função é para criar triângulos retângulos.