Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Explicação para fazer a bandeira da Colômbia? Não entendi!

<meta Charset="UTF-8">
<h3>Bandeira da Colômbia</h3>
<canvas id="colombia" width="300" height="200"></canvas>

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

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

    pincel.fillStyle = "#003893";
    pincel.fillRect(0, altura/2, largura, altura/4);

    pincel.fillStyle = "#CE1126";
    pincel.fillRect(0, altura*3/4, largura, altura*3/4);
</script>
7 respostas

Vania, o que você não entendeu específicamente?

    var escala = 1.2;
    bandeira.width *= escala;
    bandeira.height *= escala;
    var largura = bandeira.width;
    var altura = bandeira.height;
    var pincel = bandeira.getContext("2d");

Vania,

A escala é de 1.2, algo como 120% (O canvas tem largura de 300px, então 300 * 120% = 360px). A bandeira terá a propriedade width multiplicado por 120%, e isso é atribuido para largura. O mesmo ocorre pra altura, que atribui o bandeira.height multiplicado por 120%. A variável pincel recebe o bandeira.getContext, que possibilita desenhar na bandeira (O canvas). Ficou mais claro?

Ficou sim João, obrigada!

O que significa esse sinal no código?
*=
solução!

Você está atribuindo e multiplicando a variavel escala com a variavel bandeira. Algo como bandeira.width = bandeira.width * escala. Este tipo de operador (atribuição por multiplicação) faz com que você deixe o código mais sucinto, ou pior, crie uma variavel temporária para lidar com essa operação. Assim como multiplicação, é possível somar com +=, subtrair com -= e dividir com /=.

Boa João, obrigada:)