Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Preciso de uma explicação alternativa.

<meta charset = "UTF-8">

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

<script>

    function desenhaQuadrado(x, y, altura, cor)   {

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

        pincel.fillStyle = cor
        pincel.fillRect(x, y, 80, altura);

        pincel.fillStroke = "black"
        pincel.strokeRect(x, y, 80, altura);

    }


    function desenhaTexto(texto, x, y)   {

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


        pincel.font = "15px Georgia";
        pincel.fillStyle = "black"
        pincel.fillText(texto, x, y);

    }  

    function serie2015()   {

        desenhaQuadrado(20, 50, 50, "blue");
        desenhaQuadrado(20, 100, 25, "green");
        desenhaQuadrado(20, 125, 20, "yellow");
        desenhaQuadrado(20, 145, 5, "red");

        desenhaTexto("Serie 2015", 25, 40);

    }

    function serie2016()   {

    desenhaQuadrado(150, 50, 65, "blue");
    desenhaQuadrado(150, 115, 20, "green");
    desenhaQuadrado(150, 135, 18, "yellow");
    desenhaQuadrado(150, 153, 2, "red");

    desenhaTexto("Serie 2016", 155, 40);

    }    

    serie2015()
    serie2016()

</script>

Saudações, essa dúvida é referente ao exercício 7 da aula 2. Eu já estou a mais de 2 dias tentando resolver esse exercício e por mais que eu leia outros tópicos com a mesma dúvida não consigo entender.

O exercício pede que façamos uma função que desenhe as duas colunas mas na resolução eu já reli várias vezes e não consigo entender, acredito que pela inserção da array e quando entra serie[i] na resolução embola tudo pra mim.

No meu código acima eu fiz um modo manual e inseri funções para facilitar a chamada, porém ficou um pouco colado e parece que existem cores sobrepondo outras mesmo eu definindo bem as coordenadas onde cada um deve ficar.

Gostaria que me dessem uma explicação alternativa do exercício ou mesmo corrigissem onde estou errando no meu modo manual.

Obrigado!

1 resposta
solução!

Olá, Yago! Tudo bem? Então.. o seu código funcionou certinho, só que imagine que você tivesse que fazer uma barra com 100 retângulos.. ia dar trabalho, né? Por isso o exercício sugere que você use um laço de repetição.

Bom.. aqui está o link pra minha resolução comentada do exercício: https://cursos.alura.com.br/forum/topico-barras-codigo-comentado-137695

Leia com calma e atenção e qualquer coisa só perguntar.. Abraços!