somente preenchimento ou somente contorno):
Prr r
t
ttPt
s
ttr tP tP
s
Prt
tt
tr
ttstr
t
Se quisermos fazer outro arco, temos que iniciar mais um path; do con-
trário, o desenho formado ficará estranho (figura 1.8). Repare que a posição x foi deslocada para desenharmos à direita do anterior:
r
ttPt
ttr tP tP
tr
tt
ttstr
t
13
1.2. Começando a desenhar
Casa do Código
Figura 1.8: Dois arcos desenhados juntos no mesmo path: um é a continuação do outro!
Faça também uma circunferência completa. Não precisa se preocupar em
converter 360 graus para radianos, basta fazer o arco de zero até 2 pi. Vamos omitir o último parâmetro, pois tanto faz fazermos no sentido horário ou
anti-horário (já que vamos começar e finalizar no mesmo ponto):
rrê t
ttPt
ttr tP
tt
ttstr
Pronto! Temos os seguintes desenhos na página:
Figura 1.9: Arco em sentido anti-horário, arco em sentido horário e circunferência completa,
com preenchimento e contorno
Desenhando imagens
Se você já está ficando preocupado, pensando se todos os gráficos em um
jogo são criados via programação, eu tenho uma boa notícia para você: não 14
Casa do Código
Capítulo 1. Fundamentos
são. A grande maioria vem de imagens já prontas, elaboradas em programas
gráficos.
Para desenhar imagens pré-elaboradas em um Canvas, primeiro temos de
carregar o arquivo de imagem. O objeto Image do JavaScript é equivalente a um elemento <img> na página, porém somente em memória. Após criá-lo, apontamos seu atributo src para o arquivo desejado:
tór
rr rrtt
r
sr
t á
r tttt
Convém aguardar a imagem ser carregada antes de desenhá-la. O objeto
Image possui o evento onload, que será disparado automaticamente pelo
browser quando o carregamento estiver completo:
tór
t
q trs
Estando carregada, a imagem pode ser desenhada através do método
drawImage do context. Este método pode ser chamado de duas formas:
drawImage(imagem, x, y, largura, altura): desenha a im-
agem inteira, na posição e tamanho especificados;
drawImage(imagem, xOrigem, yOrigem, larguraOrigem,
alturaOrigem, xDestino, yDestino, larguraDestino,
alturaDestino): desenha parte da imagem.
Vamos experimentar a primeira forma. No pacote de download, na pasta
deste capítulo ( 01), está presente uma subpasta de nome img, contendo
o arquivo ovni.png. Este será posteriormente o inimigo que a nave irá
15
1.2. Começando a desenhar
Casa do Código
enfrentar em nosso jogo. A imagem possui 64 pixels de largura por 32 de
altura (64x32). Vamos criar uma página com um Canvas e carregá-la:
rq st
s s t ts
srt
s tt
r s ttts
r tt sttt
rrr
r
sr
t
q srs r
srt
No evento onload, fazemos um loop para desenhar cinco OVNIs, um
ao lado do outro. A variável x indica a posição de cada desenho:
t
çr sçã
r
sr s s
r r
ttr
Figura 1.10: Desenhando imagens com drawImage
16
Casa do Código
Capítulo 1. Fundamentos
Se quiséssemos desenhar as imagens ampliadas ou reduzidas, bastaria
modificar a largura e a altura:
r t t
ttr
r r t
ttr
Vamos experimentar a segunda forma, a que recebe oito valores! Na pasta
img, temos o arquivo explosao.png, que também será usado no jogo.
Esta imagem contém uma sequência de animação (spritesheet), da qual de-
senhamos uma parte por vez:
Figura 1.11: Explosão usada no jogo do livro
A técnica de clipping consite em selecionar uma área da imagem original
para ser desenhada:
Figura 1.12: Selecionando uma área da imagem para recorte (clipping)
Os quatro primeiros valores passados ao drawImage indicam o retân-
gulo da área enquadrada; os outros quatro representam a posição e o tamanho do desenho no Canvas:
17
1.2. Começando a desenhar
Casa do Código
rq st
s s t ts
srt
s tt
r s ttts
r tt sttt
rrr
r
sr s
t
ttr
r rrt
s s
srt
Figura 1.13: Resultado do clipping no Canvas
No capítulo 4, faremos uso intensivo do clipping para criar animações.
Métodos save e restore
Um recurso do context que considero de extrema importância é poder
facilmente guardar configurações e retornar a elas mais tarde. É uma excelente prática que cada função ou método guarde as configurações atuais e as restaure antes de retornar. Desta forma, um não afeta o trabalho do outro!
Mas já imaginou ter que salvar cada propriedade em uma variável?
18
Casa do Código
Capítulo 1. Fundamentos
tór
ã ç st
t srqrs
r s rçõs
r trr ttt strt t
r rs
ttt
s
s rçõs trrs
ttt trr
Para nossa sorte, o context possui o método save. Este método em-
pilha configurações, fazendo uma cópia de todas as configurações atuais para o próximo nível. Pense em cada nível como um andar nessa pilha. Nós sempre trabalhamos no nível mais alto, de modo que configurações que ficaram em níveis inferiores permanecem inalteradas:
Figura 1.14: Método save empilhando configurações
Quando queremos retornar às configurações anteriores, chamamos o
método restore. Ele volta para o nível imediatamente abaixo:
19
1.2. Começando a desenhar
Casa do Código
Figura 1.15: Voltando para configurações anteriores com restore