Olá! É a primeira vez que posto, sou nova no curso! Desculpa qualquer erro ai! kkkk
Sobre esse exercício das barras de gráfico, gostaria de colocar o código que fiz...
Deu certo, mas foi diferente do gabarito do professor. Nesse caso, pode ser considerado como correto? Eu entendi onde o professor quis chegar, mas na parte do comando "FOR" foi mais complicado.
Se eu não estiver errada, compreendi que o loop vai seguindo enquanto a "VAR I" for menor que o tamanho do array (serie.length) e vai acrescentando mais um (i++) para ir ao próximo número do array, até esgotar. Entendi a var altura... enfim, lendo o código eu até consigo entender onde o prof. quer chegar, mas eu não conseguiria fazer isso sozinha! Tanto é que quando fui tentar fazer do zero, sozinha, fiz essa solução que postei ai... kkkkkk... achei esse exercício pesadinho! Tem algum lugar onde eu possa encontrar outros semelhantes para praticar? Acredito que seja uma questão de treinamento, pois não sou da área, é tudo muito novo pra mim!!! Desde já, obrigada!!!
<canvas width="600" height="400"> </canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext ("2d");
function retanguloAzul (x, y, altura) {
pincel.fillStyle = "blue";
pincel.fillRect ( x, y, 50, altura); //largura fixa
pincel.strokeStyle = "black";
pincel.strokeRect(x, y, 50, altura); //largura fixa
}
function retanguloVerde (x, y, altura) {
pincel.fillStyle = "green";
pincel.fillRect ( x, y, 50, altura);
pincel.strokeStyle = "black";
pincel.strokeRect(x, y, 50, altura);
}
function retanguloAmarelo (x, y, altura) {
pincel.fillStyle = "yellow";
pincel.fillRect ( x, y, 50, altura);
pincel.strokeStyle = "black";
pincel.strokeRect(x, y, 50, altura);
}
function retanguloVermelho (x, y, altura) {
pincel.fillStyle = "red";
pincel.fillRect ( x, y, 50, altura);
pincel.strokeStyle = "black";
pincel.strokeRect(x, y, 50, altura);
}
function grafico2015 () {
retanguloAzul ( 50, 20, 50) ; //primeiro, azul de 2015
retanguloVerde ( 50, 70, 25); //verde de 2015
retanguloAmarelo (50, 95, 20 ); //amarelo de 2015
retanguloVermelho (50, 115, 5); //vermelho de 2015
}
function grafico2016 () {
retanguloAzul ( 150, 20, 65) ; //primeiro, azul de 2016
retanguloVerde ( 150, 85, 20); //verde de 2016
retanguloAmarelo ( 150, 105, 13); //amarelo de 2016
retanguloVermelho ( 150, 118, 2); //vermelho de 2016
}
function desenhaTexto(texto, x , y) { //vai poder colocar um texto no desenho com essa function.
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.font= "15px Georgia"; //tamanho e fonte
pincel.fillStyle= "black"; //cor
pincel.fillText(texto, x, y); //o que vai ser inserido
}
grafico2015 ();
grafico2016 ();
desenhaTexto (2015, 50, 10);
desenhaTexto (2016, 150, 10);
</script>
