<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!