<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
function fazPreto (xa,ya,cor){
pincel.fillStyle=cor;
pincel.beginPath();
pincel.moveTo(50, 50);
pincel.lineTo(xa,ya);
pincel.lineTo(xa-350,ya);
pincel.fill();
}
function fazBranco (xb,yb,cor){
pincel.fillStyle=cor;
pincel.beginPath();
pincel.moveTo(100, 175);
pincel.lineTo(xb,yb);
pincel.lineTo(xb-175,yb);
pincel.fill();
}
fazPreto(400,400,'black');
fazBranco(275,350,'white');
</script>
2
respostas
respostas
Não entendi a versão do professor, e a resposta dele nem rodou no Browser.
Bem, vamos pelo começo. O programa dele está sem o Canvas, por esse motivo, o programa não rodou, pois não havia tela para ele pintar. Então, se você adicionar a tela, o programa irá rodar.
<canvas width="600" height="400"></canvas>Agora, sobre a segunda parte do programa dele, foi um cálculo matemático para gerar automaticamente o esquadro branco, sem ter que colocar uma nova função (como fiz na minha). Desse modo, gera sozinho o esquadro branco sem ter que adicionar mais informações. (6xa + xc) / 7 = (6 50 + 400 ) / 7 = (300+400) / 7 = 700 / 7 = xa = 100
Espero ter ajudado.
O código que criei também ficou o oposto do professor, mas acabei chegando ao mesmo resultado. vou compartilhar o código aqui!
<canvas width="600" height="400"></canvas>
<script>
function desenhaTriangulo(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();
}
desenhaTriangulo(50,50,400,400,'black');
desenhaTriangulo(100,175,275,350,'white');
/
</script>