Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dúvida moveTo ( como chegar no cálculo ?)

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade Ordem e Progresso

por Kildane de Souza Castro
| 107.9k xp | 12 posts
<canvas width="600" height="400"></canvas>

<script>

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

    pincel.fillStyle="green"
    pincel.fillRect(0,0,600,400); // cria o retãngulo


    pincel.fillStyle='yellow'; // pinta
    pincel.beginPath(); // começa o caminho
    pincel.moveTo(300, 50); //marca o ponto comeca na metade do width="600" e o 50 pq ?
    pincel.lineTo(50, 200); //
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(300, 350);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.fillStyle="darkblue"
    pincel.beginPath();
    pincel.arc(300, 200, 100, 0, 2*3.14);
    pincel.fill();
</script>

A dúvida é como chegar a conclusão do cálculo ? Vi que a maior dica dada pelo instrutor, foi como montar a esfera e suas coordenadas, mas confesso que não sai do lugar com as informações para conseguir montar os triângulos. Alguém tem o pulo do gato ? Grata desde já.

3 respostas
solução!
por Renan Melo
| 78.9k xp | 62 posts
Owner | CIO | CTO at Futuremedia

Olá Kildane. A bandeira no exemplo passado tem 600 de largura e 400 de altura (fundo verde). Como podemos ver, o losango amarelo da nossa bandeira é um pouco menor, ficando com uma margem em todas as laterais. Se não tivesse essa margem, os vértices do losango ficariam colados nas bordas da bandeira. Para isso, no exemplo passado no código, eles consideraram uma margem igual de 50 em todas as bordas.

Losango Vertice ESQUERDA: x = 50 (distância da margem esquerda no eixo horizontal) / y=200 (meio da bandeira no eixo vertical: 400 / 2 = 200)

Losango Vertice SUPERIOR: x = 300 (meio da bandeira no eixo horizontal: 600 / 2 = 300) / y=50 (distância da margem superior no eixo vertical)

Losango Vertice DIREITA: x = 550 (distância da margem direita no eixo horizontal: 600 - 50 = 550) / y=200 (meio da bandeira no eixo vertical: 400 / 2 = 200)

Losango Vertice INFERIOR: x = 300 (meio da bandeira no eixo horizontal: 600 / 2 = 300) / y=350 (distância da margem inferior no eixo vertical: 400 - 50 = 350)

A partir desses valores, eles dividiram esse losango em 2 triângulos: UM pedaço superior e outro inferior... como se tivesse cortado o losango horizontalmente em 2.

TRIANGULO SUPERIOR:

Vertice SUPERIOR: x = 300 (meio da bandeira no eixo horizontal: 600 / 2 = 300) / y=50 (distância da margem superior no eixo vertical)

pincel.moveTo(300, 50);

Vertice ESQUERDA: x = 50 (distância da margem esquerda no eixo horizontal) / y=200 (meio da bandeira no eixo vertical: 400 / 2 = 200)

pincel.lineTo(50, 200);

Vertice DIREITA: x = 550 (distância da margem direita no eixo horizontal: 600 - 50 = 550) / y=200 (meio da bandeira no eixo vertical: 400 / 2 = 200)

pincel.lineTo(550, 200);

TRIANGULO INFERIOR:

Losango Vertice INFERIOR: x = 300 (meio da bandeira no eixo horizontal: 600 / 2 = 300) / y=350 (distância da margem inferior no eixo vertical: 400 - 50 = 350)

pincel.moveTo(300, 350);

Vertice ESQUERDA: x = 50 (distância da margem esquerda no eixo horizontal) / y=200 (meio da bandeira no eixo vertical: 400 / 2 = 200)

pincel.lineTo(50, 200);

Vertice DIREITA: x = 550 (distância da margem direita no eixo horizontal: 600 - 50 = 550) / y=200 (meio da bandeira no eixo vertical: 400 / 2 = 200)

pincel.lineTo(550, 200);
por Renan Melo
| 78.9k xp | 62 posts
Owner | CIO | CTO at Futuremedia

Aproveito para complementar aqui com uma outra solução feita por outro colega, que em vez de fazer 2 triângulos, fez um losango diretamente. Dê uma olhadinha no código dele:

https://cursos.alura.com.br/forum/topico-bandeira-do-brasil-usando-losango-112767

por Kildane de Souza Castro
| 107.9k xp | 12 posts

Obrigada pelas explicações e exemplo de outro método ! Me deu mais clareza.