8/4/2014

Canvas API

14. Canvas API

O elemento canvas
A Canvas API permite a voc desenhar na tela do navegador via Javascript. O nico elemento HTML existente para isso o elemento c a n v a s , o resto todo feito via Javascript. Veja como inserir o elemento c a n v a snuma pgina: < c a n v a si d = " x "w i d t h = " 3 0 0 "h e i g h t = " 3 0 0 " > < / c a n v a s > Isso vai exibir um retngulo vazio. Para desenhar nele, primeiro obtemos o contexto de desenho, com Javascript: c o n t e x t = d o c u m e n t . g e t E l e m e n t B y I d ( ' x ' ) . g e t C o n t e x t ( ' 2 d ' ) Agora que temos um contexto, podemos desenhar nele. Vamos comear com um simples retngulo: c o n t e x t . f i l l R e c t ( 1 0 ,1 0 ,5 0 ,1 5 0 ) Simples, no? Que tal tentarmos algo um pouco mais complexo? D uma olhada no exemplo: Arquivo: exemplos/14/canvas.html 1< ! D O C T Y P Eh t m l > 2< h t m l > 3< h e a d > 4< m e t ac h a r s e t = " U T F 8 "/ > 5< t i t l e > C a n v a sA P I < / t i t l e > 6< / h e a d > 7< b o d y > 8 9< c a n v a si d = " x "w i d t h = " 3 0 0 "h e i g h t = " 3 0 0 " > < / c a n v a s > 1 0< b u t t o no n c l i c k = " d e s e n h a r ( ) " > d e s e n h a r < / b u t t o n > 1 1 1 2< s c r i p t > 1 3f u n c t i o nd e s e n h a r ( ) { 1 4 1 5 1 6 1 7 1 8 1 9
http://www.w3c.br/cursos/html5/conteudo/capitulo14.html 2/4

Existe um contexto 3D?

Ainda no. Existem vrias implementaes de contexto 3D, e cada fabricante de navegador tem criado a sua, mas ainda no h um padro do W3C sobre esse assunto.

/ /O b t e m o soc o n t e x t o c o n t e x t = d o c u m e n t . g e t E l e m e n t B y I d ( ' x ' ) . g e t C o n t e x t ( ' 2 d ' ) / / I n i c i a m o su mn o v od e s e n h o c o n t e x t . b e g i n P a t h ( )

8/4/2014

Canvas API

2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9 4 0 4 1}

/ / M o v e m o sac a n e t ap a r aoi n i c i od od e s e n h o c o n t e x t . m o v e T o ( 1 5 0 , 5 0 ) / / D e s e n h a m o sa sl i n h a s c o n t e x t . l i n e T o ( 2 2 0 , 2 5 0 ) c o n t e x t . l i n e T o ( 5 0 , 1 2 5 ) c o n t e x t . l i n e T o ( 2 5 0 , 1 2 5 ) c o n t e x t . l i n e T o ( 8 0 , 2 5 0 ) c o n t e x t . l i n e T o ( 1 5 0 , 5 0 ) / / Od e s e n h on od ev e r d a d ee n q u a n t ov o c / / n om a n d a roc o n t e x t op i n t l o . / / V a m o sp i n t a roi n t e r i o rd ea m a r e l o c o n t e x t . f i l l S t y l e = ' # f f 0 ' c o n t e x t . f i l l ( ) / / V a m o sp i n t a ra sl i n h a sd ev e r m e l h o . c o n t e x t . s t r o k e S t y l e = ' # f 0 0 ' c o n t e x t . s t r o k e ( )

4 2< / s c r i p t > 4 3 4 4< / b o d y > 4 5< / h t m l > E veja o que acontece quando se clica no boto:

H muito mais para voc estudar se quiser se aprofundar na Canvas API. Apenas para que voc tenha uma idia, possvel desenhar texto, sombras, gradientes, incluir imagens no canvas, manipular os pixels, rotacionar e transformar os objetos.

Canvas e SVG

http://www.w3c.br/cursos/html5/conteudo/capitulo14.html

3/4

8/4/2014

Canvas API

Uma dvida muito comum quando usar Canvas, quando usar SVG. Para saber escolher, preciso entender as diferenas entre um e outro. SVG vetorial, e baseado em XML, logo, acessvel via DOM. Canvas desenhado pixel a pixel, via Javascript. Assim, as vantagens do SVG so: 1. O contedo acessvel a leitores de tela 2. O grfico escalvel, no perde resoluo ou serrilha ao redimensionar 3. O contedo acessvel via DOM E as vantagens do Canvas: 1. A performance muito superior ao SVG na maioria dos casos 2. fcil desenhar via Javascript. Em SVG, preciso fazer seu script escrever XML para voc. Com Canvas voc s manda desenhar, e pronto.

http://www.w3c.br/cursos/html5/conteudo/capitulo14.html

4/4