Beruflich Dokumente
Kultur Dokumente
Educao e Informtica
iLearn
Sumrio
CANVAS API......................................................................................................... 4
Origem do Canvas........................................................................................... 4
A evoluo da especificao............................................................................ 6
Trabalhando com o <canvas>.........................................................................6
Suporte dos navegadores................................................................................ 7
O elemento <canvas>........................................................................................ 9
O que Fallback?........................................................................................ 10
Coordenadas Cartesianas.............................................................................. 12
Verificar suporte do canvas no navegador.....................................................13
Cdigo Bsico para o Canvas.........................................................................15
Comenando a Desenhar.................................................................................. 16
fillStyle........................................................................................................... 16
fillRect(x,y,l,a)................................................................................................ 16
Cdigo do primeiro programa usando a API do canvas...............................17
rect(x,y,l,a).................................................................................................... 18
Limpando Parte do Desenho............................................................................. 19
clearRect(x,y,l,a)............................................................................................ 19
Trabalhando com Bordas................................................................................... 21
strokeStyle..................................................................................................... 21
strokeRect(x,y,l,a).......................................................................................... 21
Trabalhando com Sombras................................................................................ 22
shadow.......................................................................................................... 22
shadowOffsetY............................................................................................... 22
Comeando um Novo Desenho.........................................................................23
beginPath().................................................................................................... 23
moveTo(x,y)................................................................................................... 23
lineWidth........................................................................................................ 24
stroke().......................................................................................................... 24
closePath()..................................................................................................... 24
Semicrculos ou Seguimentos de Crculos.........................................................25
arc(x,y,r,anguloInicial,anguloFinal, sentido)...................................................25
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
arcTo(x1,y1,x2,y2,r)....................................................................................... 28
Curvas Bezier.................................................................................................... 29
quadraticCurveTo........................................................................................... 29
bezierCurveTo................................................................................................ 30
Mtodos Adicionais........................................................................................... 30
lineJoin........................................................................................................... 30
globalAlpha.................................................................................................... 31
lineCap........................................................................................................... 31
Gradiente.......................................................................................................... 32
addColorStop(offset, cor)............................................................................... 32
createLinearGradiente(x,y,x1,y1)..................................................................32
createRadialGradiente(x,y,r,x1,y1,r1)............................................................33
Preenchendo formas com padres....................................................................33
createPattern(imagem, formaDeRepetio)...................................................33
Transformaes................................................................................................. 34
scale(x,y)....................................................................................................... 34
translate(x,y)................................................................................................. 35
rotate(ngulo)................................................................................................ 35
Trabalhando com Fontes................................................................................... 36
font................................................................................................................ 36
fillText(texto,x,y[,maxWidth]).........................................................................36
strokeText(texto,x,y[,cpMac]).........................................................................37
textAlign........................................................................................................ 37
textBaseline................................................................................................... 38
Imagens no Canvas........................................................................................... 38
Tcnica........................................................................................................... 38
drawImage..................................................................................................... 39
Recortando e Redimensionando Imagens.........................................................40
drawImage..................................................................................................... 40
Sprites............................................................................................................ 41
Utilizando udios............................................................................................... 41
Audio.............................................................................................................. 41
Construindo Animaes em Canvas..................................................................44
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Conceitos....................................................................................................... 44
setInterval() e setTimeout()...........................................................................45
requestAnimationFrame................................................................................. 46
Limpando o canvas........................................................................................ 47
Animao bsica............................................................................................ 48
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
CANVAS API
Origem do Canvas
Em 2004 a Apple desenvolveu um elemento para desenhar em formato de pixel para as
telas do Mac OS X Dashboard. Mais tarde essa mesma tecnologia foi utilizada no
navegador Safari. Apesar de solues em pixel, em teoria, serem piores solues de
desenho em vetores, o canvas a melhor forma de animao no HTML5 para
necessidades mais complexas.
Quando no HTML ou XHTML precisvamos exibir grficos, o que era possvel era apenas
a exibio de grficos baseados em pixel, como o elemento <img> ou via CSS pelo
background-image,com suas imagens nos formatos JPEG, GIF, BMP ou PNG.
OBS: Temos observando, ao longo do tempo, que o formato PNG est se tornando um
padro em funo dos seus excelentes recursos. Hoje, em pases com banda larga,
realmente verdadeiras, esse formato largamente utilizado, pois reuni todos os recursos
do formato GIF e JPEG alm de possibilitar recursos para a Web, somente encontrados
no PNG (24 bit com transparncia).
O elemento <canvas> faz parte da especificao de aplicaes Web WHATWG 1.0
tambm conhecida como HTML5. A definio oficial da API Canvas, com suas
propriedades e mtodos, so definidas em http://www.whatwg.org/specs/webapps/current-work/multipage/the-canvas-element.html, sua documentao oficial, ou se
prefirir, em http://bit.ly/Xldzw pelo WHATWG como tambm em
http://www.w3.org/TR/2011/WD-2dcontext-20110405/ com short link em
http://bit.ly/qyYDVZpelo W3C.
A implementao do canvas se baseia em trs coisas bsicas: o elemento HTML canvas,
sua API e o JavaScript para executar o que desejarmos na tela. Poderamos associar o
canvas a um papel em branco e o lpis e a borracha ao JavaScript. Os dois juntos podem
fazer coisas realmente poderosas.
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
J o canvas bitmap, ou seja, nada de XML, nada de navegao pelo DOM. Tudo que
iremos manipular dentro do canvas ser atravs de uma linguagem script, a recomendada
claro, o JavaScript. O canvas, pelo menos oficialmente at agora, 2D, nica forma
possvel em sua recomendao oficial, embora alguns estudos mais avanados j
apontem o WebGL como sendo o canvas com contexto em 3D. o que esperamos que
oficialmente, seja anunciado nas prximas atualizaes do HTML5. Atualmente a
biblioteca three.js a biblioteca mais utilizada para o contexto 3D, mas isso assunto
para mais tarde, quando voc j dominar muito bem o canvas em 2D e o JavaScript. Em
canvas tudo desenhado dinamicamente e gerado em uma rea previamente definida.
Neste treinamento, iremos estudar o canvas no contexto 2D.
<canvas> um novo elemento encontrado na especificao do HTML5 em que, em sua
rea previamente definida, podemos desenhar formas, linhas, arcos, textos, gradientes e
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
A evoluo da especificao
Algumas boas sugestes foram dadas pelo WHATWG para incrementar a especificao
do canvas, ainda no implementados nos navegadores.
O mtodo ellipse() - Mtodo que cria um caminho no formato de elipse.
Realmente est na especificao do WHATWG em interface CanvasPathMethods,
como mostro abaixo:
void ellipse(unrestricted double x, unrestricted double y,
unrestricted double radiusX, unrestricted double radiusY,
unrestricted double rotation, unrestricted double startAngle,
unrestricted double endAngle, boolean anticlockwise);
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Curso de HTML5
Educao e Informtica
iLearn
O elemento <canvas>
Sintaxe:
<canvas></canvas>
Por padro, quando no informamos explicitamente o tamanho ocupado pelo <canvas>,
com as propriedades width (comprimento) e height (altura), atravs da API do <canvas>, o
mesmo assume as dimenes de 300px de comprimento por 150px de altura.
Caso queira definir um tamanho especfico para o canvas, deve faz-lo de forma explicita,
ou seja, definindo os seus valores:
<canvas width=400 height=300></canvas>
Desta forma, a rea til a ser manipulada pelo JavaScript passa a ser de 400px de largura
por 300px de altura.
Para que o JavaScript possa manipular mais de um elemento canvas na pgina,
recomendado identificar o elemento com um id, logo teremos:
<canvas id=desenho1 width=400 height=300></canvas>
Curso de HTML5
Educao e Informtica
iLearn
Fallback
Na implementao original do <canvas>, pela Apple em seu Safari, o elemento <canvas>
no precisava do fechamento (</canvas>), mas como o elemento <canvas> foi muito
difundido pela Web, algumas facilidades, como um contedo para fallback, foram ento
oferecida para a comunidade. O navegador Mozilla Firefox implementou a obrigatoriedade
da tag de fechamento </canvas>. Logo, apesar de no necessria para o Safari,
recomendamos sempre o uso da tag de fechamento.
O que Fallback?
Pelo fato do elemento canvas ser relativamente novo e ainda no ser implementado pela
totalidade dos chamados grandes navegadores de mercado, faz-se necessrio uma
alternativa para esses navegadores. A essa tcnica chamamos de fallback.
A tcnica muito simples, basta oferecermos um contedo alternativo dentro do elemento
canvas. Os navegadores que no suportam o elemento canvas, simplesmente ignoram o
container canvas exibindo apenas o seu contedo. Para os navegadores que renderizam
o elemento canvas o fazem normalmente, ignorando o fallback em seu interior e
considerando as parametrizaes encontradas no canvas. O contedo com a
implementao do fallback no obrigatrio, mas recomendado para uma melhor
experincia do usurio.
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
OBS: claro que existe limite para tudo isso, pois imagine um jogo muito complexo
desenvolvido em canvas e JavaScript, muito provvel, que voc no ir desenvolver
todo o jogo novamente em ActionScript 3, linguagem de programao do Flash. Essa
uma aplicao que no teremos um fallback funcional, poderamos apenas dizer que seu
navegador no suporta o elemento canvas do HTML5.
A seguir temos alguns exemplos de fallback para o elemento <canvas>.
<canvas id="desenho1"width="400"height="300">
<p>Dolar oficial hoje: Compra: 1,5790 - Venda: 1,5810</p>
</canvas>
Exemplo de fallback com o uso pargrafo (texto) como alternativa
Outro exemplo
<canvas id="desenho1" width="400" height="300">
<img src="_recursos/img/grafico.png" width="400" height="300"
alt="grfico com cotaes do dolar oficial"
longdesc="_recursos/longdesc/cotacao.html">
</canvas>
Exemplo de fallback com o uso de imagem como alternativa
Outro exemplo
<canvas id="desenho1" width="400" height="300">
<object
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
type="application/x-shockwave-flash"
data="arquivo.swf"
codebase="http://download.macromedia.com/pub/shock
wave/cabs/flash/swflash.cab#version=7,0,0,0"
width="468"
height="60">
<param
name="movie"
value="arquivo.swf">
<param
name="quality"
value="high">
<param
name="allowFullScreen
value="true">
<param
name="allowscriptaccess
value="always">
</object>
</canvas>
Exemplo de fallback com o uso do Adobe Flash como alternativa
Coordenadas Cartesianas
Chama-se Sistema de Coordenadas no plano cartesiano ou espao cartesiano ou
plano cartesiano um esquema reticulado necessrio para especificar pontos num
determinado "espao" com dimenses. Cartesiano um adjetivo que se refere ao
matemtico francs e filsofo Descartes que, entre outras coisas, desenvolveu uma
sntese dalgebra com a geometria euclidiana.
http://pt.wikipedia.org/wiki/Sistema_de_coordenadas_cartesiano
As coordenadas para o contexto 2D so diferentes da que aprendemos na escola. Veja a
figura a seguir, observando que para a direita e para baixo os valores so positivos.
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Contexto de Renderizao
O elemento canvas cria uma regio de desenho, com tamanho fixo com um ou mais
contextos de renderizao, que so usados para criar e manipular o contedo exibido
no agente do usurio. Vamos nos concentrar no contexto 2D. Outros contextos podem
nos fornecer diferentes tipos de renderizao, como por exemplo, o contexto 3D, que
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Curso de HTML5
Educao e Informtica
iLearn
function desenha(){
var canvas = document.getElementById('desenho1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid #000;
margin: 0 auto;
display: block;
}
h1 {
text-align:center;
font-size:1.2em;
font-family: Arial, Helvetica, sans-serif;
color: #A6A6A6;
}
</style>
</head>
<body onload="desenha();">
<h1>iLearn - HTML5 Canvasex4-template.html</h1>
<canvas id="desenho1" width="800" height="500">
</canvas>
</body>
</html>
Veja o exemplo em ex4-template.html
Com o template criado, vamos passar para o nosso primeiro exemplo usando a API do
canvas para desenhar, mas antes iremos aprender os primeiros comandos que usaremos
para criar desenhos no canvas.
Comenando a Desenhar
Passaremos agora a estudar a API do canvas. Seus mtodos e propriedades.
No canvas primeiro passaremos os atributos para s depois mandar desenhar na tela.
No adiantar nada tentar mudar uma propriedade depois de desenhado.
fillStyle
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
ctx.fillStyle= "blue";
ctx.fillStyle="rgb(200,0,0)"
ctx.fillStyle="rgba(200,0,0,0.5)";
ctx.fillStyle= "rgb(100%,0%,0%)"
ctx.fillStyle= "#0f0"
50.0% , 1 )'
Para que possamos ver as cores acima definidas, precisamos de um
objeto, que faremos agora com o elemento fillRect, para desenhar um
retngulo com preenchimento.
fillRect(x,y,l,a)
Este mtodo preenche com uma corslida (fill) um retngulo (Rect). Comeando pelo
ponto x e y, referente ao canto superior esquerdo e com os parmetros de a largula (l) e
altura (a) do objeto. Caso nenhuma cor seja definida, o preenchimento por default ser da
cor preta.
Cdigo:
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Curso de HTML5
Educao e Informtica
iLearn
</head>
<body onload="desenha();">
<h1>iLearn - HTML5 Canvas - ex5-fillRect.html</h1>
<canvas id="desenho1" width="800" height="500">
</canvas>
</body>
</html>
Cdigo do arquivo (ex5-fillRect.html)do primeiro programa usando a API do canvas
Como resultado,teremos a imagem a seguir:
rect(x,y,l,a)
Este mtodo desenha um retngulo. Comeando pelo ponto (x,y), referente ao canto
superior esquerdo e com os parmetros de a largura (l) e altura (a) do objeto.
Este mtodo s renderizado no vdeo quando utilizamos um outro mtodo chamado
fill(), que passa a preencher todos os objetos criados mas no renderizados, como foi o
caso do mtodo rect.
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
fill()
Este mtodo preenche com uma cor slida um path.
Cdigo:
ctx.rect(200,50,100,100);
ctx.fill();
Resultado:
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
ctx.clearRect(10,10,100,70);
Resultado:
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
ctx.strokeStyle="rgb(200,0,0)";
strokeRect(x,y,l,a)
Este mtodo desenha um contorno, comeando pelo ponto x,y, referente ao canto
superior esquerdo e com os parmetros de altura (a) e largura (l) do objeto.
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
shadowColor
Define a cor da sombra. Os valores vlidos so os mesmos valores vlidos para o CSS,
ou seja, pelo nome da cor, RGB (hexa ou percentual), RGBA (hexa ou percentual), HSL e
HSLA.
shadowOffsetX
Definem o deslocamento no eixo X da sombra do objeto. Os valores podem ser positivos
(direita) ou negativos (esquerda).
shadowOffsetY
Definem o deslocamento no eixo Y da sombra do objeto. Os valores podem ser positivos
(para baixo) ou negativos (para cima).
shadowBlur
Define o desfoque do shadow.
Exemplo:
// aplicando sobreamento
ctx.shadowColor = "rgb(100,0,0)";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 20;
// definindo a cor da bordar
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
ctx.strokeStyle = "rgb(100,0,0)";
// definindo o espao ocupado pela borda
ctx.strokeRect(100,100,300,300);
Veja o exemplo em ex9-shadow.html
ctx.beginPath();
moveTo(x,y)
Este mtodo posiciona a ponta da caneta para desenhar em outro ponto (x,y). Cabe
lembrar, que esse mtodo no arrasta desenhando, ele levanta a ponta da caneta e
desloca-se at o ponto (x,y) desejado.
Exemplo:
ctx.moveTo(0,0);
lineTo(x,y)
Este mtodo desenha da posio atual (x_atual, y_atual) at a posio final (x,y), passado
como parmetro desse mtodo, uma linha reta.
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
Exemplo:
iLearn
ctx.lineTo(200,100);
lineWidth
Define a espessura das linhas a serem desenhadas a partir dessa definio. A unidade
em pixel e somente nmeros inteiros. Para que ela venha a aparecer, necessrio
informarmos valores maiores que zero, que o default e no exibido absolutamente
nada.
Exemplo:
ctx.lineWidth = 5;
stroke()
Stroke significa acesso, lanamento. Este mtodo aplica os estilos definidos pelos
atributos no caminho imediatamente construido. Em muitos casos, a no aplicao do
stroke no faz o objeto desenhado aparecer na tela do computador.
Uma das suas aplicaes seria no caso do uso de moveTo e lineTo, por exemplo.
Exemplo:
ctx.stroke();
closePath()
Este mtodo fecha um caminho aberto, caso voc no o tenha fechado. Quando esse
mtodo invocado, uma linha reta ligar os pontos iniciais e finais desse path atual.
Exemplo:
ctx.closePath();
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
arc(x,y,r,anguloInicial,anguloFinal, sentido)
Este mtodo desenha um arco com o centro nas coordenadas x, y com raio definido pelo
parmetro r e com ngulo inicial e final em radianos (positivo ou negativo). O sentido pode
ser anti-horario(sentido positivo na trigonometria) representado pelo true ou pelo sentido
horrio (sentido negativo na trigonometria) representado pelo false.
Horrio
= false
Anti-horario = true
Observao importante: A unidade dos ngulos o radiano e no em graus. Para um
melhor entendimento, necessitaremos converte-la.
Exemplo:
Math.PI/2
= 90 graus
Math.PI
= 180 graus
Math.PI * 2
= 360 gruas
3/2 * Math.PI
= 270 graus
Cdigo:
ctx.beginPath();
ctx.strokeStyle = "black";
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
ctx.lineWidth = 5;
//circulocompleto
ctx.arc(400, 100, 50, (Math.PI/180)*0,(Math.PI/180)*360, true);
ctx.stroke();
ctx.closePath();
Resultado
Observe que tivemos que converter nossos ngulos de 0 e 360 para radiano com a
multiplicao de (Math.PI/180). Para o ngulo 0 temos ento (Math.PI/180)*0 e para a
converso do ngulo de 360 temos (Math.PI/180)*360.
Curso de HTML5
Educao e Informtica
iLearn
Resultado:
Curso de HTML5
Educao e Informtica
iLearn
arcTo(x1,y1,x2,y2,r)
Tambm conhecida como curvas quadrticas. O mtodo arcTo s foi implementado nas
ltimas verses dos navegadores modernos, talvez pelo fato que o resultado do arcTo
pode ser obtido pelo mtodo arc.
Do ponto (x1,y1) o mtodo calcula uma linha reta at o ponto (x2,y2), em seguida o
mtodo desenha um arco que envolve esses dois pontos usando o raio dado.
O mtodo arcTo s funciona se houver no caminho corrente um subpath. Vamos comear
traando um linha de (0,0) at (100,200).
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Curvas Bezier
As curvas de Bezier so mais flexveis que os arcos. Possuem 2 mtodos
distintos, um cbica (Bezier) e outro mtodo quadrtica.
ctx.quadraticCurveTo(cpx, cpy, x, y)
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
quadraticCurveTo
ctx.moveTo(0,0);
ctx.quadraticCurveTo(100,25,0,350);
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
bezierCurveTo
ctx.moveTo(150,0);
ctx.bezierCurveTo(0,125,300,175,150,300);
Mtodos Adicionais
lineJoin
Este atributo define a forma de unio das linhas. Os valores possveis so: miter, bevele
round.
Exemplo:
ctx.lineJoin=valor;
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
globalAlpha
Este atributo define uma transparncia aplicada a todos os elementos do canvas. Os
valores possveis variam de 0 (transparncia total) at 1 (opacidade total). Sua aplicao
passa a valer aps o ponto no cdigo que o globalAlpha foi aplicado.
Exemplo:
ctx.globalAlpha = "0.5";
lineCap
Este atributo, destina-se a definir a forma de acabamento das extremidades das linhas.
Os valores possveis so: butt, round e square.
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
Exemplo:
iLearn
ctx.lineCap=valor;
Gradiente
Para definirmos um gradiente, precisamos de algumas definies. O ponto inicial e final
do retngulo que receber o gradiente e a cor inicial e final para montar o gradiente.
addColorStop(offset, cor)
Este mtodo define as cores do gradiente. O valor para offset pode variar de 0 at 1.
O valor 0 define a cor inicial do gradiente e 1 a cor final. Observe que se o gradiente
necessitar mais de uma cor, podemos usar valores intermedirios para definir esse
gradiente. Com isso podemos ter um gradiente de mltiplas cores, basta voc aplica
vrias vezes o mtodo addColorStop.
createLinearGradiente(x,y,x1,y1)
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Este mtodo definido pelos pontos (x,y), o canto superior esquerdo do retngulo que ter
um gradiente linear at o ponto (x1,y1).
Exemplo:
gt = ctx.createLinearGradient(10,10, 200,400);
gt.addColorStop(1, '#f00');
gt.addColorStop(0, '#ff0');
ctx.fillStyle = gt;
ctx.fillRect(10,10, 200,400);
gt2 = ctx.createLinearGradient(250,10, 200,400);
gt2.addColorStop(1, '#f00');
gt2.addColorStop(0, '#ff0');
ctx.fillStyle = gt2;
ctx.fillRect(250,10, 200,400);
ctx.fill();
createRadialGradiente(x,y,r,x1,y1,r1)
Este mtodo cria um gradiente radial. Os pontos (x,y) e (x1,y1) definem os centros dos
crculos que definem onde comea e termina, respectivamente, o gradiente, assim como
os parmetros r e r1 definem seus raios.
Exemplo
gt = ctx.createRadialGradient(130,60,10,130,60,160);
gt.addColorStop(0, '#f00');
gt.addColorStop(1, '#ff0');
ctx.fillStyle = gt;
ctx.fillRect(10,10, 200,400);
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
createPattern(imagem, formaDeRepetio)
Este mtodo permite usarmos uma imagem como preenchimento de uma forma.
O parmetro imagem, define a imagem a ser utilizada. Ela pode ser um elemento img ou
um vdeo.
O parmetro fomaDeRepetio define a forma como a imagem ir ocupar, a
saber:repeat, no-repeat, repeat-x e repeat-y.
Exemplo:
Resultado:
Transformaes
scale(x,y)
Este mtodo responsvel por scalartodos os grficos contidos no canvas.
Exemplo:
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
ctx.translate(canvas.width/2, canvas.height/2);
ctx.scale(2, 2);
ctx.fillStyle = "blue";
//Para deixar o centro depois da escala no mesmo
ponto
ctx.fillRect(-rectWidth/2, -rectHeight/2,
rectWidth, rectHeight);
Veja o exemplo em ex24-scale.html
translate(x,y)
Este mtodo desloca para um valor X e/ou Y as coordenadas da origem do canvas, ou
seja, desloca todos os grficos contido no canvas.
Exemplo:
rotate(ngulo)
Este mtodo faz com que os desenhos do canvasrotacionem.
Exemplo:
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
ctx.fillStyle = "blue";
ctx.fillRect(-rectWidth / 2, -rectHeight / 2,
rectWidth, rectHeight);
Resultado:
fillText(texto,x,y[,maxWidth])
Este mtodo destina-se a desenhar o texto preenchido. O parmetro texto pode ser uma
varivel que contenha texto. Os parmetros x e y so as coordenadas de onde o texto
comear a ser escrito. O parmetro opcional maxWidth define o comprimento mximo,
quando enviado, faz com que o texto diminua de tamanho para caber nessa
especificao.
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
Exemplo:
iLearn
strokeText(texto,x,y[,cpMac])
Este mtodo semelhante ao fillText, mas seu objetivo exibir somente as bordas do
texto. A cor do contorno definido pela propriedade strokeStyle.
Exemplo:
textAlign
O alinhamento do texto pode ser definido pela propriedade textAlign, seus valores podem
ser left, right, center, start e end (start equivale a left e end equivale a right),
sendo left o padro. O alinhamento feito apartir de uma linha vertical imaginria que
passa pela posio X do texto.
center - A linha se encontra no meio do texto
left - A linha se encontra a esquerda do texto e o texto desenhado apartir dessa linha
right - A linha se encontra a direita do texto e o texto desenhado atrs dessa linha
ctx.font = "12px Times New Roman";
ctx.fillStyle = "#000";
ctx.textAlign = "center";
ctx.fillText("Meio", 100, 20);
ctx.textAlign = "left";
ctx.fillText("Linha esquerda", 100, 30);
ctx.textAlign = "right";
ctx.fillText("Linha direita", 100, 40);
Produz:
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
textBaseline
Esta propriedade destina-se a determinar o alinhamento em relao a baseline do texto.
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Imagens no Canvas
Tcnica
Vamos desenhar uma imagem no canvas. Primeiro deve-se carregar a imagem
normalmente atravs de um elemento image. Utilizando o mtodo
document.createElement(image) ou o construtor Image(), como mostro no exemplo a
seguir.
var img = new Image();
img.onload = function() {
imagemCarregada(ctx, img);
};
img.setAttribute("src", "_recursos/img/html5.png");
No cdigo acima um elemento Image criado, depois adicionamos um evento onload
que ser disparado quando a imagem estiver carregada e pronta para ser usada no
canvas, esse evento chama a funo ImagemCarregada e envia como argumento para o
CanvasContext que representa uma variavel de um contexto 2D do canvas e this que
representa a prpria imagem. S depois o atributo src da imagem alterado para a URI
do arquivo, que o navegador inicia o carregamento da imagem.
importante mudar o atributo src apenas depois de se criar o evento onload, pois
quando a pgina executada localmente ou a imagem se encontra no cache do
navegador ela pode carregar antes de o evento ser propriamente criado e ento ele no
ser disparado.
drawImage
Agora vamos desenhar a imagem no canvas.
function imagemCarregada(ctx, img) {
ctx.drawImage(img, 10, 10);
//ctx.drawImage(img, 10, 10, img.width, img.height);
}
Essa funo desenha a imagem img no canvas do contexto ctx na posio (0,0).
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Para se recortar sem redimensionar basta que a largura do recorte seja igual
alarguraFinal e a altura igual a alturaFinal.
Se no exemplo de cdigo anterior quisssemos que nossa imagem fosse desenhada com
as dimenses 400x400 alteraramos nossa funo ImagemCarregada() para o seguinte:
function imagemCarregada(ctx, img) {
ctx.drawImage(img, 300, 10, 400, 400);
}
Para recortar e desenhar um quadrado de 100x100 pixels do canto superior esquerdo de
nossa imagem:
function imagemCarregada(ctx, img) {
ctx.drawImage(img, 0, 0, 100, 100, 10, 300, 100, 100);
}
Veja o exemplo em ex30-image.html
Sprites
Uma preocupao quando utilizamos canvas para jogos, por exemplo, quando utilizamos
muitas imagens, como otimizar a carga das mesmas. Dependendo do jogo que
desenvolver, poder utilizar mais de 1000 imagens, imagine o trafego destas imagens
todo o tempo enquando o usurio joga. Se voc estiver jogando localmente, no
perceber muito isto, mas se estiver usando imagens de um servidor na internet, poder
esperar bastante at que uma imagem aparea, sem contar a quantidade de transaes
HTTP que ser utilizado. Uma maneira de contar esta situao a utilizao de Sprite, ou
seja, utilizar todas as imagens em um nico arquivo de imagem. Para exibir uma imagem,
podemos calcular o deslocamento de uma imagem e recortar apenas um pedao por meio
do mtodo drawImage() que aprendemos no tpico anteior.
Veja no exemplo a seguir como podemos trabalhar facilmente com sprite.
ctx.drawImage (img, sprite.width*(imageNumber), 0, sprite.width,
sprite.height, x, y, sprite.width, sprite.height);
Veja o exemplo em ex30-image1.html
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Utilizando udios
Audio
Usando o elemento audio do HTML5 uma nova maneira de incorporar arquivos de
udios em uma pgina Web. Antes do HTML5, a nica maneira de integrar udio em
pginas na Web integrando plugins como o Flash. O elemento de idio podem ser
criados por meio do mtodo document.createElement(image) ou pelo construtor
Image. Veja o exemplo abaixo:
// Cria um novo objeto Audio
sound = new Audio();
// Seleciona o audio
//sound.src = "_recursos/audio/music.ogg";
sound.src = "_recursos/audio/music.mp3";
// Inicia o audio
sound.play();
Veja o exemplo em ex31-audio.html
A utilizao do elemento audio muito fcil, alm do mtodo play() utilizado no exempli
anteior, existem outros que poder ser utilizado na manipulao do jogos.
Note que na tabela a seguir, extrada do site CaniUse (caniuse.com), que o elemento
audio suportado pela maioria dos navegarores, inclusive aqueles que so rodades e
dispositivos mveis.
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Devemos estar cientes que nem todos os navegadores suportam todos os arquivos
mencionados. Firefox, por exemplo, passou a suportar MP3 apenas na verso 21 ou
superior. A tabela a seguir mostra os formatos suportados pela maioria dos navegadores:
Browser
Internet Explorer
Firefox
Chrome
Safari
Opera
MP3
9+
21+
Sim
3.1+
14+
WAV
No
3.5+
Sim
3.1+
11.00+
OGG
No
3.5+
9+
Sim
10.50
+
Curso de HTML5
Educao e Informtica
iLearn
return undefined;
}
if (audio.canPlayType('audio/mpeg') != "") {
return '.mp3';
}
if (audio.canPlayType('audio/ogg;codecs="vorbis"')!=""){
return '.ogg';
}
return undefined;
}
var audioExt = getAudioExt();
if (audioExt) {
// Cria um novo objeto Audio
sound = new Audio();
// Seleciona o audio
sound.src = "_recursos/audio/music"+audioExt;
// Inicia o audio
sound.play();
}
Veja o exemplo em ex32-audio.html
Curso de HTML5
Educao e Informtica
iLearn
setInterval() e setTimeout()
Para se executar o mtodo drawingLoop() repetidas vezes em intervalos regulares no
JavaScript de uma forma bem simples usar um dos dois mtodos temporizadores:
setInterval() ou setTimeout(). O setInterval(function, milliseconds) dis ao navegador
chamar repetidas vezes em intervalos fixos atpe que o mtodo clearInterval() seja
chamado.
Veja no exemplo a seguir como utilizamos o mtodo setInterval():
// Chama o drawingLoop() a cada 20 milsimos de segundos
var gameLoop = setInterval(drawingLoop, 20);
// Para de chamar o drawingLoop() e limpa a varivel gameLoop
clearInterval(gameLoop);
No prximo exemplo, utilizamos o mtodo setTimeout():
function drawingLoop(){
// 1. Limpa o canvas
// 2. Percorre por todas as entidades
// 3. Desenha todas as entidades
// 4. Chama o drawingLoop() a cada 20 milsimos de
//
segundos
var gameLoop = setTimeout(drawingLoop,20);
}
Quando quisermos parar a animao, podemos usar o mtodo clearTimeout():
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
requestAnimationFrame
Enquanto estiver usando setInterval() ou setTimeout() como forma de animar quadros, os
navegadores j vem trabalhando com uma nova API especificamente para tratamentos de
animaes. Existem algumas vantagens da utilizao desta nova API ao invs do
setInterval(), dentre elas so:
Fabricantes de navegadores possuem seus prprios mtodos nesta API, como por
exemplo: Microsoft possui o mtodo msRequestAnimationFrame() e o Firefox possui o
mtodo mozRequestAnimationFrame(). No entanto, criamos um polyfill cross-browser
para fornecer estes mtodos em um nico nome: requestAnimationFrame() e
cancelAnimationFrame().
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length &&
!window.requestAnimationFrame; ++x) {
window.requestAnimationFrame =
window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback,
element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16
(currTime - lastTime));
var id = window.setTimeout(function() {
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
Veja no exemplo a seguir como utilizamos o mtodo requestAnimationFrame() como
forma de substituio dos mtodos setInterval() e setTimeout():
function drawingLoop(nowTime){
// 1. Limpa o canvas
// 2. Percorre por todas as entidades
// 3. Opcionalmente, poder utilizar primeiro nowTime e
//
o ltimo para identificar o frames por segundo
// 4. Desenha todas as entidades
// 5. Chama o drawingLoop() de acordo com a capacidade
//
de processamento da mquina
var gameLoop = requestAnimationFrame(drawingLoop);
}
Quando quisermos parar a animao, podemos usar o mtodo clearAnimationFrame():
// Para de chamar o drawingLoop() e limpa a varivel gameLoop
cancelAnimationFrame(gameLoop);
Limpando o canvas
Antes de redesenhar qualquer coisa precisamos limpar o canvas, para isso vamos
simplesmente desenhar um quadrado branco encima de tudo.
ctx.fillStyle = #fff;
ctx.fillRect(0, 0, canvas.width, canvas.height);
www.iLearn.com.br
Curso de HTML5
Educao e Informtica
iLearn
Animao bsica
Vamos agora animar um pequeno quadrado, ele ser desenhado no canto superior
esquerdo do canvas e sua posio no eixo X ser modificada varias vezes at atingirmos
uma outra posio desejada.
var X_Atual = 0; // define a posio atual no eixo X
var Y_Atual = 0;
var X_Alvo = 200; // define a posioo final no eixo X
function redesenhar(nowTime) {
// Limpa o canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Desenha todas as entidades
ctx.fillStyle = "#000";
// ctx.fillRect(X_Atual, Y_Atual, 100, 100);
ctx.fillRect(X_Atual, 0, 100, 100);
// Atualizar posio X do quadrado at que atinja o
// objetivo
if(X_Atual < X_Alvo) {
X_Atual++;
//Y_Atual++;
requestAnimationFrame(redesenhar);
}
}
requestAnimationFrame(redesenhar);
Veja o exemplo em ex33-animate.html
www.iLearn.com.br