O sistema de coordenadas do Canvas
Para posicionarmos os desenhos no Canvas, pensamos nele como um
enorme conjunto de pontos. Cada ponto possui uma posição horizontal (x)
e uma vertical (y).
O ponto (0, 0) (lê-se: zero em x e zero em y) corresponde ao canto
superior esquerdo do Canvas:
Figura 1.2: Sistema de coordenadas do Canvas
1.2
Começando a desenhar
Métodos fillRect e strokeRect
Uma
vez obtido o contexto gráfico, podemos configurar várias propriedades e chamar nele os métodos de desenho. Por exemplo, para desenhar retângulos, podemos usar os métodos:
fillRect(x, y, largura, altura): pinta completamente uma
área retangular;
strokeRect(x, y, largura, altura): desenha um contorno
do retângulo.
Os valores x e y corresponderão à posição do canto superior esquerdo
do retângulo. A partir daí, o retângulo vai para a direita (largura) e para baixo (altura).
6
Casa do Código
Capítulo 1. Fundamentos
Veja um exemplo de código para desenhar um retângulo no Canvas,
nosso primeiro exemplo prático completo:
rq rtst
st ó tr
s s t ts
srt
s tt
r s ttts
r tt sttt
sr rtâ
ttt
srt
Não é simples de fazer? O resultado será um simples retângulo preto. Seu
canto superior esquerdo localiza-se no ponto (50, 50), e ele possui 100 pixels de largura por 100 pixels de altura:
Figura 1.3: Retângulo desenhado com fillRect
Se trocarmos fillRect por strokeRect, veremos apenas o contorno:
Figura 1.4: Retângulo desenhado com strokeRect
7
1.2. Começando a desenhar
Casa do Código
Propriedades fillStyle, strokeStyle e lineWidth
Podemos configurar algumas propriedades do contexto, de forma a escol-
her as cores e espessuras:
fillStyle: cor do preenchimento
strokeStyle: cor da linha
lineWidth: espessura da linha em pixels
rq rtst
s s t ts
srt
s tt
r s ttts
r tt sttt
Prt r
ttt r
ttt
tr sssr
ttt
ttstrt
ttstrt
srt
Figura 1.5: Configurando as propriedades do preenchimento (fillStyle) e contorno (strokeStyle)
8
Casa do Código
Capítulo 1. Fundamentos
Paths (caminhos)
Desenhos mais complexos podem ser desenhados como paths (camin-
hos). Um path é um conjunto de comandos de desenho que ficam registrados
na memória, aguardando os métodos fill (preencher) ou stroke (contornar)
serem chamados.
Porém, antes de tudo, devemos chamar o método beginPath (iniciar cam-
inho) para apagar os traçados feitos previamente. Se não fizermos isso, eles ficarão na memória e serão desenhados novamente junto com o próximo path:
tór
Pss ss r rr t
r t ss trrs
ttPt
q ç s
Prr t ár s
tt
trr ár s
ttstr
Por exemplo, podemos desenhar uma estrela usando os seguintes coman-
dos:
moveTo(x, y): posiciona a caneta virtual em um determinado
ponto;
lineTo(x, y): traça uma linha do ponto atual até o ponto indicado.
9
1.2. Começando a desenhar
Casa do Código
Figura 1.6: Estrela criada usando moveTo e lineTo
Esses comandos não desenham as linhas imediatamente, apenas ar-
mazenam as informações no path. Devemos chamar o método stroke para
desenhá-las de fato no Canvas:
rq st
s s t ts
srt
s tt
r s ttts
r tt sttt
r ss trrs
ttPt
sr str
tt Pt
tt
tt
tt
tt
tt
rr
ttt
ttstrt r
rçr s s
ttstr
10
Casa do Código
Capítulo 1. Fundamentos
srt
Circunferências e arcos
São criados com o mesmo método, arc. Um arco é uma parte de uma
circunferência, e serve para criar linhas curvas. Uma circunferência, para o Canvas, é nada mais que um arco de 360 graus.
O método arc recebe os seguintes parâmetros:
x, y: as coordenadas do ponto central da circunferência;
raio da circunferência em pixels;
ângulo inicial em radianos;
ângulo final em radianos;
sentido: aqui você pode passar false (sentido anti-horário) ou true
(sentido horário). Este parâmetro é opcional; se omitido, o desenho é
feito no sentido anti-horário.
Figura 1.7: Localização do ponto central, ângulos inicial e final e o ponto zero Os ângulos podem estar em qualquer posição na circunferência e têm
de ser informados em radianos, não em graus.
Lembra-se das aulas de
trigonometria?
Eu também não, mas sabemos que pi radianos é meia
volta (180 graus), portanto 2 pi vale uma volta completa (360 graus). Para 11
1.2. Começando a desenhar
Casa do Código
nossa sorte, o JavaScript possui a constante Math.PI, que nos dá o valor
3.141592653589793!
Convertendo de graus para radianos
A fórmula é muito simples:
r rs
r rs rs tP
Importante: o método arc é usado em um path, ou seja, não desenha o arco ou círculo na hora.
O primeiro arco da figura 1.7 pode então ser desenhado com o comando:
tór
ttr
tr
tr
tP
í rs
tP ér rs
s
t trár
Para fazer o outro arco, basta escrevermos true no último parâmetro.
Vamos experimentar na prática! Primeiro, vamos inicializar as variáveis
e configurar o contexto com a aparência desejada:
rq rst
s s t ts
srt
s tt
r s ttts
r tt sttt
rs sssr
ttt r
12
Casa do Código
Capítulo 1. Fundamentos
ttstrt
ttt
t
srt
Para fazer um arco, devemos iniciar um path, chamar o método arc
e depois fazer fill e stroke (ou somente um destes dois, se quisermos