<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='15px Georgia';
pincel.fillStyle='black';
pincel.fillText(texto, x, y);
}
function desenhaBarra(x, y, serie, cores, texto) {
desenhaTexto(x, y-20, texto);
for(var i = 0; i < serie.length; i++) {
desenhaRetangulo(x,y, 50, serie[i], cores[i]);
y = y + serie[i];
}
}
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ['blue', 'green', 'yellow', 'red'];
desenhaBarra(50, 50, serie2015, cores, '2015');
desenhaBarra(150, 50, serie2016, cores, '2016');
</script>
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas
respostas
Eu fiz desta maneira o resultado foi o mesmo, posso utilizalo assim?
Olá, Lucas!
Não aparece nenhum código em seu post.
Para sinalizar que seu texto é um trecho de código, você deve apertar TAB ou 4 espaços em branco. Assim, o texto ficará na cor marrom claro.
Valeu, arrumei agora
solução!
Testei aqui e está funcionando certinho, Lucas!
Em relação ao seu código ter ficado diferente do que o instrutor postou, não se preocupe! É super normal pessoas diferentes pensarem em soluções diferentes para o mesmo problema.
Espero ter ajudado!
Continue firme em seus estudos!
Olá Lucas, gostei muito do seu código, achei mais fácil para entender a lógica.
Poderia me explicar essa parte:
desenhaRetangulo(x,y, 50, serie[i], cores[i]);
y = y + serie[i];Aqui você está chamando a função desenhaRetangulo? Poderia me explicar os parâmetros?
Obrigada!
Olá Silvana, que bom que gostou.
Então deixe-me explicar da forma que eu pensei.
Nessa parte do programa eu estava utilizando a função desenhaRetangulo atravez da função desenha barra, porem se voltarmos em quais parâmetros a função desenhaRetangulo pede fica mais facil de entender.
"desenhaRetangulo(x, y, largura, altura, cor)"
Assim é a função, entao na hora de criar a barra eu chamei ela ja utilizando tudo que eu precisava.
x = o valor no eixo X que eu queria começar o desenho.
y = o valor no eixo Y que eu queria começar o desenho.
largura = 50 = foi o valor que decidi para espessura da minha barra.
altura = serie[i] = aqui foi utilizado a variavel "i" que foi criada na estrutura de repetição "for" para que ela pegasse o valor do array "serie2015" e "serie2016".
cor = cores[i] = da mesma forma foi utilizado a variavel "i" para pegar os valores dentro do array "cores"
Sendo assim como eu queria fazer uma barra que foi constituida de retangulos eu precisava sempre ficar alternando os valores de altura e as cores, por isso utilizei os 2 arrays que eu precisa para alternar as cores e os valores da altura
y = y + serie[i] = eu ultilizei para que cada vez que eu fosse desenha um retangulo eu atualizasse o valor de y para que nunca fosse criado um retangulo em cima do outro, eu partiria de um ponto inicial e cada vez que a que eu acrescentasse + 1 na variavel "i" ela tambem atualizasse a altura do ultimo retangulo criado na variavel y.
Foi dessa forma que pensei, espero ter ajudado!Ajudou muito! Obrigada por responder. :)