Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Meu codigo..

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Gráfico de barras

por Henrique Ibarreta
| 9.6k xp | 10 posts

Boa noite!

Fiquei em duvida também na explicação do exercício, no uso do for e no uso do [].

Então quis fazer da maneira que consegui... segue meu código:

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

<script>

    function desenhaRetangulo(x, y, largura, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle=cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x,y, largura, altura);
    }

    function desenhaTexto(x, y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='20px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }


desenhaRetangulo(200, 300, 50, 100, 'red')

desenhaRetangulo(200, 300, 50, 95, 'yellow')
desenhaRetangulo(200, 300, 50, 75, 'green')
desenhaRetangulo(200, 300, 50, 50, 'blue')







desenhaRetangulo(300, 300, 50, 100, 'red')

desenhaRetangulo(300, 300, 50, 98, 'yellow')
desenhaRetangulo(300, 300, 50, 85, 'green')
desenhaRetangulo(300, 300, 50, 65, 'blue')



desenhaTexto(200, 290, '2015')
desenhaTexto(300, 290, '2016')
</script>

Sei que deve estar inadequado, mas funcionou ;D

1 resposta
por Sarah Ocy Sousa Medeiros
| 1701.8k xp | 3515 posts
Alura Scuba Team Monitora de Fórum Ops

Oi, Henrique! Tudo bem?

Para complementar os seus estudos e te ajudar a compreender melhor o que são e como manipular os Arrays [], deixo como indicação o artigo da Alura:

Somado a isso, posso acrescentar que a estrutura de controle for é um laço de repetição utilizado para executar um bloco de código repetidamente enquanto uma determinada condição é verdadeira.

A sintaxe geral do for é a seguinte:

for (variável de controle; condição de término; instrução de atualização) {
    // bloco de código a ser executado repetidamente
}

Dessa forma, dentro dos parênteses declaramos uma variável, que será usada para controlar o laço, após isso, de acordo com uma condição imposta à essa variável, definimos até quando esse laço deve rodar e por fim qual valor a variável de controle deverá receber a cada novo ciclo do loop.

Um exemplo de uso do for pode ser dado pelo código abaixo. Nele a variável i receberá o valor inicial 0, porém adicionará +1 ao seu valor atual a cada novo ciclo (i++) e enquanto o seu valor for menor que 5 ela exibirá na tela o valor atual da variável.

for (let i = 0; i < 5; i++) {
  console.log(i);

  //será exibido na tela: 0, 1, 2, 3, 4
}

Espero ter ajudado!

Um forte abraço e bons estudos!

Caso este post tenha te ajudado, por favor, marcar como solucionado ✓