Entrar Ainda não tem acesso?
1
resposta

O polêmico esquadro

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

por WALTER ALIPIO DA SILVA
| 262.2k xp | 58 posts

No exercício do esquadro 2 a minha primeira ideia foi criar a função e chama-la 2 vezes com parâmetros diferentes, mas depois de ver a resposta do instrutor, e não entender, resolvi tentar a seguinte resolução; 

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

    function drawSquare(xa,ya,xc,yc,color) {
            var screen = document.querySelector("canvas");    
            var brushTool = screen.getContext("2d");

            brushTool.fillStyle = color;
            brushTool.beginPath();
            brushTool.moveTo(xa,ya);
            brushTool.lineTo(xa,yc);
            brushTool.lineTo(xc,yc);
            brushTool.fill();


            brushTool.fillStyle = 'white';
            brushTool.beginPath();
            brushTool.moveTo(xa +(xa*100/100),ya+(ya*250/100));
            brushTool.lineTo(xa +(xa*100/100),yc-(yc*12.5/100));
            brushTool.lineTo(xc-(xc*31.25/100),yc-(yc*12.5/100));
            brushTool.fill();

    }
    drawSquare(50,50,400,400,'black');

</script>

Meio bizarro mas aparentemente funciona. O que acham?

1 resposta
por Bruno Divino
| 287.3k xp | 239 posts
Instrutor

Olá Walter! Tudo certo? Espero que sim. 🙂

Parabéns pelo empenho nos estudos. Sua solução é muito boa e atende os requisitos da questão!

No caso da solução do professor...

<!-- esquadro.html -->

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

<script>

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

</script>

O professor define valores fixos para a criação de 2 triangulos. O primeiro triângulo tem o seu interior preenchido da cor preta, enquanto o segundo triangulo, menor e posicionado ao centro do primeiro, possui o seu interior preenchido da cor branca.

Como não existe a utilização de uma função, todos os valores são fixos.

Espero ter ajudado! Quaisquer dúvidas, estou à disposição. 😉

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.Bons Estudos!