Olá, Rafael! Tudo bem contigo?
Desculpe a demora em dar um retorno!
- Variáveis Locais e Variáveis Globais
Quando declaramos uma variável global toda a estrutura do nosso código vai enxergar essa variável
var bola = 10;
function jogar() {
document.write("A quantidade de bolas é: " + bola)
}
jogar();
Nesse exemplo acima, dentro da função jogar consegue enxergar a variável bola. Logo, ela é global.
No exemplo abaixo, vamos criar uma variável local
function jogar() {
var bola = 10;
}
document.write("A quantidade de bolas é: " + bola);
Agora que a variável bolaestá dentro da função, ela se tornou local. Somente a função na qual ela está pode enxergar. Se rodar o código acima verá que dará um erro dizendo que a variável bolaque estou chamando não está definida
- var pincel e tela.getContext
Antes, definimos o tamanho de nossa tela em que iremos trabalhar, que neste caso é o tamanho do canvas e guardamos dentro de uma variável chamada tela. Agora precisamos definir a variável que vai permitir que desenhamos algo na tela e por isso usamos o getContexte guardamos dentro da variável pincel.
Já temos nossa tela definida na variável tela e quem vai desenhar na variável pincel
Resumindo: var pincelé a variável que está guardando quem desenha e tela.getContextsignifica "autorizo desenhar ou escrever (getContext) na tela que defini acima".
- pincel.fillStyle e pincel.fillRect
Em pincel.fillStyleatribuímos (sinal de atribuição sempre será igual(=)) uma cor para nosso fundo e pincel.fillRect estabeleço qual é o tamanho que irei pintar essa minha tela.
Experimente colocar
pincel.fillStyle = 'grey';
pincel.fillRect(200, 200, 600, 400);
Verá uma diferença considerável.
Sobre atribuir valores, tem razão! Porém, um só dizemos qual a cor que queremos, no outro estamos colocando medidas, por exemplo:
Tenha em mente que medidas X equivalem a horizontais e medidas Y são verticais
- Comece com x = 0 (canto superior esquerdo)
- Também comece com y = 0 (canto superior esquerdo)
- Vá para x = 600 (canto superior direito)
- Desço para y = 400 (canto inferior direito)
Perceba que cobrimos um retângulo cinza.
Altere esses valores para ver na prática!
Dê uma olhada nesse quadro onde dá uma boa noção de posicionamento X e Y
Espero ter ajudado, Rafael!
Um abraço e bons estudos
