Mas vamos por partes. Primeiro, a HTML com o canvas:
<!DOCTYPE html>
<html lang='BR'>
<head>
<meta charset='UTF-8'>
<title>Desenhando</title>
</head>
<body>
<p style='text-align:center'>Área de desenho</p>
<canvas id='tela' width=800 height=400 style='border:1px solid #000000'>Seu navegador não suporta o recurso "canvas" do HTML 5.</canvas>
</body>
</html>
Repare que temos algumas diferenças em relação à aula anterior:
<!DOCTYPE html> passou a ser necessário quando alguém decidiu que os navegadores de Internet poderiam ler outros tipos de documento, além do HTML. A maioria dos navegadores não requer este comando, mas para garantir uma maior compatibilidade, vamos sempre usá-lo.
<canvas> é a área onde podemos desenhar. Suas dimensões, em pixels, são 800 de largura (width) por 400 de altura (height). O id='tela' dá um nome, uma identificação a este canvas, para que possamos nos referir a ele quando estivermos escrevendo nosso código em Javascript. Isso é importante, pois na mesma página podemos ter vários canvas diferentes (p.ex. um para a tela principal do jogo, outro para o mapa, outro para o inventário de itens, etc). Em style temos a borda do canvas, útil neste momento para termos certeza de que o nosso navegador está desenhando o canvas corretamente. A borda tem apenas 1 pixel de espessura, na cor preta, especificada como #000000 (a especificação de cores será detalhada adiante). Repare que há um texto entre <canvas> e </canvas>. Se o usuário estiver usando um navegador antigo, que ainda não suportava o HTML5, essa tag não será reconhecida, e assim apenas o texto 'Seu navegador não suporta o recurso "canvas" do HTML 5.' será mostrado.
Em seguida, vamos inserir o código Javascript que faz desenhos no canvas. Para isso, usamos as tags <script> e </script>, entre as quais ficará o nosso código. Também modificaremos a tag <body>, indicando onde a execução do código deverá começar:
<!DOCTYPE html>
<html lang='BR'>
<head>
<meta charset='UTF-8'>
<title>Desenhando</title>
<script type='text/javascript'>
function circulo(ctx,x,y,r) {
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI);
ctx.stroke();
}
function inicio() {
// alert('Antes de desenhar');
var canv = document.getElementById('tela');
var c = canv.getContext('2d');
c.strokeStyle = '#0000FF';
circulo(c,200,20,50);
c.strokeStyle = '#FF0000';
circulo(c,100,50,80);
c.strokeStyle = '#00FF00';
circulo(c,300,300,20);
// alert('Depois de desenhar');
}
</script>
</head>
<body onload='inicio()'>
<p style='text-align:center'>Área de desenho</p>
<canvas id='tela' width=800 height=400 style='border:1px solid #000000'>Seu navegador não suporta o recurso "canvas" do HTML 5.</canvas>
</body>
</html>
Repare que a palavra function aparece duas vezes no nosso script. Uma function é uma função, um pedaço de código que será executado sempre que o chamarmos pelo nome. A nossa primeira função se chama circulo. Veja que ela é chamada três vezes dentro da função inicio. Cada vez que a função é chamada, ela desenha um círculo na tela.
Copie o código acima e salve num arquivo texto, com o nome aula1.html. Ao abri-lo num navegador, você deverá ver algo como a imagem abaixo.
Vamos ao código, começando pela função inicio. Repare que a primeira linha começa com duas barras seguidas // indicando que aquela linha é apenas um comentário, ou seja, não será interpretada pelo navegador. Comentários são úteis para explicar o que cada parte do código faz (o que é importante quando os programas vão ficando grandes demais) ou, como aqui, para retirar parte do código sem precisar exclui-lo. Como teste, apague as // e salve o arquivo, voltando ao navegador e apertando a tecla F5 (atualizar) para ver o resultado.
Na segunda linha, vemos
var canv = document.getElementById('tela');
A palavra chave var indica que canv é uma variável, ou seja, um tipo de objeto que podemos usar para guardar valores ou fazer referência a um item da tela. A palavra document se refere à nossa página HTML, e a função getElementById transfere o objeto especificado ('tela', que é o nosso canvas) para a variável que acabamos de criar, canv. Assim, podemos nos referir ao canvas nas linhas que se seguem, usando apenas o nome da variável, canv.
Depois vemos
var c = canv.getContext('2d');
Criamos outra variável, c, para guardar o contexto 2d do canvas (2d = duas dimensões, como uma folha de papel cujas dimensões são a largura e o comprimento). Tudo isso porque o canvas foi criado para permitir também jogos tridimensionais, que são desenhados em outro contexto, o 3d (3d = três dimensões: largura, comprimento e altura, como num quarto, numa sala ou numa caixa de sapatos). Essa variável c é a que usaremos para desenhar no canvas.
c.strokeStyle = '#0000FF';
O contexto do canvas tem várias propriedades, como cor do fundo, cor da linha, espessura da linha... que podem ser modificadas separadamente. Essa propriedade, strokeStyle, indica a cor do traço (stroke) ou linha. Aqui é bom fazermos um parênteses para explicar um pouco da teoria das cores.
Quando misturamos tinta no papel, talvez você já tenha percebido que misturando a tinta azul com a amarela obtemos a cor verde. Isso é válido para pigmentos, e é assim que as impressoras funcionam. Impressoras jato-de-tinta coloridas têm pigmentos azul claro (Cyan ou ciano), rosa (Magenta), amarelo (Yellow) e preto (blacK). Misturando proporções diferentes desses pigmentos, pode-se chegar à cor desejada. Dadas as iniciais das cores em inglês (e o K final no caso do preto), temos o nome do modelo de cores: CMYK.
Porém, quando misturamos luzes, a história é outra. Se você colocar papéis coloridos na frente da luz de lanternas (papel celofane, por exemplo), verá que, misturando luz vermelha com luz verde, obterá luz amarela (resultado que não acontece com tintas no papel). Se não tiver lanternas, a sombra do papel celofane sobre uma superfície branca também serve. Assim, o modelo de cores para luzes é baseado nas cores primárias vermelho (Red), verde (Green) e azul (Blue), ou seja, o modelo RGB.
Assim, controlando números que representam a intensidade de vermelho, verde e azul, podemos obter qualquer cor que quisermos. Se esses números forem expressos em porcentagem, teremos RGB 100% 100% 0% (100% de vermelho, 100% de verde e 0% de azul) que equivale ao amarelo. RGB 100% 0% 0% é vermelho. RGB 0% 100% 0% é verde. RGB 100% 0% 100% é rosa. E assim por diante.
Para terminar, uma complicação a mais: quando os computadores foram criados em meados do século XX, ficou decidido que trabalhariam com números chamados bytes, que são um conjunto de 8 bits. Cada bit representa o mínimo de informação possível: ligado ou desligado, presente ou ausente, um ou zero. Como os computadores são elétricos, a vantagem é óbvia: cada fio pode representar um bit, estando ligado ou desligado. A união de 8 bits permite 256 combinações diferentes, que é o número de variações que cabe em um byte. Assim, ao invés de usar porcentagens, usamos um byte para cada cor básica e três bytes para uma combinação RGB. Para facilitar a escrita, usa-se a chamada notação hexadecimal, que vai de 00 a FF. Assim: 00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F 20 21 22 23... Como você pode ver, segue a mesma lógica do nosso sistema de numeração, mas possui 6 dígitos além dos 10 a que estamos acostumados, os 6 representados pelas primeiras letras do alfabeto. Assim, você pode brincar com a representação de cores, sabendo que FF é a maior cor possível para um byte, F0 é maior que EF, EF é maior que E9, E9 é maior que E0, que é maior que DD que é maior que DA que é maior que 80 que é maior que 7D... Confuso? Uma tabela de cores pode ajudar a encontrar a cor desejada. Temos algumas aqui, aqui e aqui. Mas não precisa se preocupar muito com isso agora.
Voltando ao código acima, temos
c.strokeStyle = '#0000FF';
Isso indica que queremos traçar uma linha de puro azul, o mais azul possível (lembre-se que FF é a intensidade máxima). Repare que a cor começa com # e está identificada como um texto cercado por 'aspas'. Repare também que todos os comandos até aqui terminam com um ponto-e-vírgula ; que é obrigatório.
Uma vez definida a cor da linha, podemos traçar o primeiro círculo
circulo(c,200,20,50);
Esta linha chama a função circulo, passando para ela 4 parâmetros ou informações que dirão onde o círculo deve ser desenhado (coordenadas X 200 e Y 20), o tamanho do círculo (raio de 50 pixels) e em que contexto, ou seja, no contexto de qual objeto canvas presente na nossa página (neste caso, o contexto guardado na variável c). Chegou a hora de olharmos como a função circulo desenha o círculo.
function circulo(ctx,x,y,r) {
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI);
ctx.stroke();
}
Observe que aqui cada parâmetro tem um nome ('ctx', 'x', 'y' e 'r'). Esses nomes funcionam como variáveis dentro da função (da mesma forma que c e canv na função inicio). Assim, a variável ctx dentro de circulo é a mesma c que estávamos vendo antes. Podemos chamar então o seu método beginPath (traduzindo: iniciaCaminho), que é usada sempre que vamos desenhar uma ou mais linhas. Depois de desenhadas as linhas (ainda na memória da máquina), chamamos a função stroke, que manda o computador desenhar as linhas na tela. Entre beginPath e stroke, podemos ter vários comandos, mas aqui só temos um: arc. A função arc desenha um círculo inteiro ou apenas parte dele. Os primeiros números (ou variáveis) passados são a posição X e Y do centro do círculo. Depois vem o raio, a distância do centro até a borda do círculo. Depois vêm o ângulo inicial e o ângulo final, medidos em radianos. Zero e 2 Pi indicam do início ao fim do círculo, ou seja, uma volta completa (fica fácil se você souber que a medida da circunferência é igual a 2*PI*Raio, ou duas vezes pi vezes o raio). Substitua o 2*Math.PI por outros números como 1.5*Math.PI, e veja o resultado.
De volta a função inicio, vemos que outros dois círculos são desenhados, cada um com diferentes cores, posição e tamanho.
Exercícios
1. Desenhe outros círculos, mudando sua posição, tamanho e cores.
2. Modifique a função circulo para que desenhe um Pac-Man no lugar do círculo.
3. Modifique as funções circulo e inicio para que a cor seja passada por um parâmetro, ao lado de ctx, x, y e r, ao invés de ser modificada fora da função que desenha o círculo.
