[Dúvida] como deixar o cod correto? | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Salomao de Cristo Machado

| 201k xp | 3 posts

olá ao fazer o exercício tentei fazer um eu mesmo seguindo a bandeira da cap anterior, mas nao consigo fazer com que as bolinhas verdes preencham toda a área. teria como dar um help e me mostrar como seria possível preencher todo o fundo com o 'for' obs: caso seja mostrado nas aulas posteriores basta me falar que eu continuo o curso e depois tento arrumar eu mesmo. desde ja agradeço.

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*3.14);
        pincel.fill();
    }
    /*
    for (var x = 0; x < 700; x = x + 50) {
        desenhaCirculo(x, 0, 50, 'green');
    }
    for (var y = 0; y < 500; y = y + 50) {
        desenhaCirculo(0, y, 50, 'green');
    }
    */
    for (var x, y = 0; x, y < 700; x, y = x + 50); (var y = 0; y < 500; y = y + 50); {
        desenhaCirculo(x, y, 50, 'green');
    }

    desenhaCirculo(300, 200, 50, 'blue');
    desenhaCirculo(200, 200, 50, 'yellow');
    desenhaCirculo(400, 200, 50, 'yellow');
    desenhaCirculo(300, 100, 50, 'yellow');
    desenhaCirculo(300, 300, 50, 'yellow');


</script>

2 respostas

por Arthur Fernandes

| 465.5k xp | 473 posts

Alura Scuba Team Estágiario Scuba Team | Escola de Programação

14/11/2022

Olá Salomão, tudo bem com você?

Para pintar todo o fundo tela do canvas, você pode utilizar a função fillRect(), disponibilizada pelo próprio canvas e que inclusive está sendo utilizada nesse trecho de código:

pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);

Essa função faz com que um retângulo seja preenchido seguindo a seguinte lógica:

fillRect(x, y, largura, altura);

Onde x é a posição inicial no eixo x, y é a posição inicial no eixo y, largura é a extensão da pintura no eixo x e a altura a extensão da pintura no eixo y.

Dessa maneira, é possível pintar todo o fundo de verde com o seguinte trecho de código:

pincel.fillStyle = 'green'
pincel.fillRect(0, 0, 600, 400);

Tirando inclusive a necessidade do trecho do for!

Muitas vezes quando estamos lidando com programação e queremos fazer alguma coisa específica, já existe algum código pronto que faz exatamente aquilo que queremos! Para encontrar esse tipo de código, nos apoiamos nas documentações das linguagens, que tem tudo o que a linguagem faz documentado.

Para entender melhor, sugiro checar a documentação do canvas HTML da W3Schools, que é uma das referências em documentação de HTML e JS!

Fico à disposição e bons estudos!

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

solução!

por Antonio Fernando dos Santos Guedes

| 53.7k xp | 66 posts

Técnico em Regulação e Vigilância Sanitária

19/11/2022

Olá Salomão!

Pelo que entendi vc quer encher o canvas de Círculos, não é isso?

Este não é o modo de aninhar loops for:

 for (var x, y = 0; x, y < 700; x, y = x + 50); (var y = 0; y < 500; y = y + 50); {
        desenhaCirculo(x, y, 50, 'green');
    }

Para aninhar vc tem de fazer um for dentro do outro. Entendas as chaves como a caixa

for (var x = 0; x <= 600; x = x + 50){
   for (var y = 0; y <= 400; y = y + 50){
        //aqui dentro escreve os círculos.
            desenhaCirculo(x, y, 50, 'green')
    }
}

Tenta aí e me diz. Valeu?