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

Explicação do código para fazer a bandeira de Madagascar? Não entendi!

Referente ao curso Lógica de Programação II: Funções, Desenhos e um Jogo

por vaniagomes_
| 24.3k xp | 37 posts
<meta Charset="UTF-8">
<h3>Bandeira de Madagascar</h3>
<canvas id="madagascar" width="300" height="200"></canvas>

<script>
    var escala = 1.2;
    var bandeira = document.getElementById("madagascar");
    bandeira.width *= escala;
    bandeira.height *= escala;
    var largura = bandeira.width;
    var altura = bandeira.height;
    var pincel = bandeira.getContext("2d");

    pincel.fillStyle = "#FFFFFF";
    pincel.fillRect(0, 0, largura/3, altura);

    pincel.fillStyle = "#fc3d32";
    pincel.fillRect(largura/3, 0, largura*2/3, altura/2);

    pincel.fillStyle = "#007e3a";
    pincel.fillRect(largura/3, altura/2, largura*2/3, altura/2);
</script>
4 respostas
por João Santana
| 200.9k xp | 156 posts

Vania, acho que a maior dúvida é em relação ao fillRect(). Esta função javascript preenche um retangulo, com os parametros x, y, largura e altura. O x é a posição de onde o elemento inicia horizontalmente, o y verticalmente. Supondo que eu tenha um elemento pincel.fillRect(10,20,20,40), eu teria um elemento iniciando do canto superior esquerdo horizontalmente 10px, com posição vertical 20px e largura e altura de 20px e 40px.

por vaniagomes_
| 24.3k xp | 37 posts

Entendi João. Obrigada.

Mas minha dúvida também está nas seguintes linhas de código. Pode me explicar?

  var escala = 1.2;
  bandeira.width *= escala;
  bandeira.height *= escala;
  var largura = bandeira.width;
  var altura = bandeira.height;
solução!
por Cecilia Fernandes
| 45.5k xp | 132 posts
Instrutor Agile coach, desenvolvedora e instrutora (cecifernandes.com)

Oi Vânia,

essa escala serve apenas para conseguirmos desenhar a bandeira no tamanho que quisermos. Como não queremos ter o trabalho de alterar tooodas as variáveis se precisarmos de uma bandeira maior, deixamos o tamanho baseado na escala escolhida.

Quanto ao código em si:

<canvas id="madagascar" width="300" height="200">

<script>
    var escala = 1.2;
    bandeira.width  *= escala; //muda o width  do canvas para 360 (=300*1.2)
    bandeira.height *= escala; //muda o height do canvas para 240 (=200*1.2)

    //usa as novas dimensões para fazer os cálculos do desenho
    var largura = bandeira.width;
    var altura = bandeira.height;
    ...
</script>

Não sei se fui clara... você entendeu? :-)

por vaniagomes_
| 24.3k xp | 37 posts

Foi sim Cecilia, obrigada.