Boa tarde,
Estou com uma dificuldade na hora de implementar o código dessa atividade de lógica, acredito que seja alguma coisa dentro da repetição talvez, ou algo dentro da função Retangulo. Porque ele consegue reproduzir o texto dos anos normalmente quando chamo a função barra, mas não está gerando os retangulos que foram criados na função retangulo, só mostra os anos e fim.
O laço que foi criado no arranjo está incorreto?
To meio que matutando a tarde toda e não encontrei o erro, como utilizo a tarde somente para resolução de exercicios, estou com essa dúvida.
Eu uso o Visual Studio Code e por isso não está com a tag script, nem a canva e etc.
Obrigado
function Retangulo(x, y, largura, altura, cor) { //criação da função do retângulo
var tela = document.querySelector("canvas"); //canvas básico
var pincel = tela.getContext("2d");
pincel.fillStyle = cor;
pincel.fillRect(x,y, largura, altura);
pincel.strokeStyle = "black";
pincel.strokeRect(x,y, largura, altura);
}
function Texto(x, y, texto) { //criação da função com os textos dos gráficos.
var tela = document.querySelector("canvas"); //canvas básico
var pincel = tela.getContext("2d");
pincel.font="30px Arial";
pincel.fillStyle = "black";
pincel.fillText(texto, x, y);
}
function Barra(x, y, serie, cores, texto) { //função da criação da geração dos "gráficos" das barras
Texto(x, y - 10, texto); //funcao para chamar o texto do gráfico
var somaAltura = 0; //declarando variável auxiliar seguindo o exemplo visto nas aulas anteriores de arranjo.
for(var posicao=0; posicao < serie.lenght; posicao++){ // laço para estrutura de repetição definindo posição inicial e como será percorrido no arranjo
var altura = serie[posicao];
Retangulo(x, y + somaAltura, 50, altura, cores[posicao]);
somaAltura = somaAltura + altura;
}
}
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ["blue", "green", "yellow", "red"];
Barra(50, 50, serie2015, cores, "2015");
Barra(150, 50, serie2016, cores, "2016");