CANVAS ELEMENTpor davidson fellipe
who ?desenvolvedor na globo.comentusiasta de tecnologias client-side desde 2002engenheiro da computação
assuntos relacionadoscanvasjavascripthtml 5canvas x svg
o que é o elemento canvas?criado pela apple para os widgets do Dashboard OS Xdesenhos bitmap 2D, 3D (futuro)html+javascrip...
suporte
para não variar...
explorercanvas
explorercanvas<!--[if lt IE9]><script src="excanvas.js"></script><![endif]-->
explorercanvasvar el = document.createElement(canvas);G_vmlCanvasManager.initElement(el);var ctx = el.getContext(2d);
EXEMPLOS DE    USO
ferramentasdraw2D javascript drawinglibrarycufonflot
CANVAS  vs. SVG
canvas vs. svg   performance desenhos                    independente de   2D                                      resoluç...
CODE
rotacionando um imagem
rotacionando um imagem<!DOCTYPE HTML><html>! <head>! </head>! <body>! ! <img src="teste.jpg" id="image"      style="displa...
rotacionando um imagemwindow.onload = function(){! var canvas = document.getElementById(simpleCanvas);! if (canvas && canv...
imprimindo pontos
imprimindo pontos<!DOCTYPE HTML><html>! <head>! ! <style type="text/css" media="screen">! ! ! #simpleCanvas{height:520px;w...
imprimindo pontos!   !   var   data =   [{x: 0,y:0},!   !   ! !    ! ! !   {x: 50,y:50},!   !   ! !    ! ! !   {x: 100,y:1...
imprimindo pontosif (canvas && canvas.getContext) {! var context = canvas.getContext(2d);! ! ! !! //proximo slide}
imprimindo pontos     //configurar largura do canvas       canvas.height = canvas.clientHeight;       canvas.width = canva...
imprimindo pontoscontext.fillStyle   = "#fff";context.strokeStyle = "#CCCCCC";context.lineWidth   = 20;context.strokeRect(...
imprimindo pontos    //descrever linhas! ! for(var numberLine = 0; numberLine < 10; numberLine ++) {! ! ! ! ! !       marg...
imprimindo pontos//imprimindo os pontosfor(a in data){    axis_x = data[a].x +             padding - (size_x/2);    axis_y...
imprimindo pontos   //imprimindo o texto    context.font = italic 400 20px Georgia, serif;    context.fillStyle = "#666";!...
referências https://developer.mozilla.org/en/Canvas_tutorial http://diveintohtml5.org/canvas.html#divingin http://code.goo...
obrigado ! email@fellipe.com www.fellipe.com @davidsonfellipe github.com/davidsonfellipe
Upcoming SlideShare
Loading in …5
×

Canvas element

2,395 views
2,276 views

Published on

Apresentação feita no BrazilJS 2011, 13 de maio de 2011, em Fortaleza

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,395
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
41
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Canvas element

  1. 1. CANVAS ELEMENTpor davidson fellipe
  2. 2. who ?desenvolvedor na globo.comentusiasta de tecnologias client-side desde 2002engenheiro da computação
  3. 3. assuntos relacionadoscanvasjavascripthtml 5canvas x svg
  4. 4. o que é o elemento canvas?criado pela apple para os widgets do Dashboard OS Xdesenhos bitmap 2D, 3D (futuro)html+javascriptespecificação w3cimplementado para o Safari e Chrome.browsers baseados no Gecko 1.8 também suportam.
  5. 5. suporte
  6. 6. para não variar...
  7. 7. explorercanvas
  8. 8. explorercanvas<!--[if lt IE9]><script src="excanvas.js"></script><![endif]-->
  9. 9. explorercanvasvar el = document.createElement(canvas);G_vmlCanvasManager.initElement(el);var ctx = el.getContext(2d);
  10. 10. EXEMPLOS DE USO
  11. 11. ferramentasdraw2D javascript drawinglibrarycufonflot
  12. 12. CANVAS vs. SVG
  13. 13. canvas vs. svg performance desenhos independente de 2D resolução salvar resultado em png controle dos elementos via DOM adequado para gráficos, imagens e manipulaçoes baseado em XML de pixels processamento lento a desempenho constante medida que aumenta a complexidade da DOMhttp://borismus.com/canvas-vs-svg-performance/
  14. 14. CODE
  15. 15. rotacionando um imagem
  16. 16. rotacionando um imagem<!DOCTYPE HTML><html>! <head>! </head>! <body>! ! <img src="teste.jpg" id="image" style="display:none;width:500px;height:375;" />! ! <canvas id="simpleCanvas" width="500" height="375"> ! Seja mais feliz, não use IE!! ! </canvas>! ! <script type="text/javascript"> //proximo slide! ! </script>! </body></html>
  17. 17. rotacionando um imagemwindow.onload = function(){! var canvas = document.getElementById(simpleCanvas);! if (canvas && canvas.getContext) {! ! var image = document.getElementById(image);! ! canvas.height = image.width;! ! canvas.width = image.height;! ! var context = canvas.getContext(2d);! ! //mover de um ponto a outro do grid! ! context.translate(image.height, 0);! ! context.rotate(Math.PI / 2);! ! context.drawImage(image, 0, 0);! ! context.restore();! }};
  18. 18. imprimindo pontos
  19. 19. imprimindo pontos<!DOCTYPE HTML><html>! <head>! ! <style type="text/css" media="screen">! ! ! #simpleCanvas{height:520px;width:520px;}! ! </style>! </head>! <body>! ! <canvas id="simpleCanvas">! ! ! Seja mais feliz, não use IE!! ! </canvas>! ! <script type="text/javascript"> window.onload = function(){ //proximo slide };! ! </script>! </body></html>
  20. 20. imprimindo pontos! ! var data = [{x: 0,y:0},! ! ! ! ! ! ! {x: 50,y:50},! ! ! ! ! ! ! {x: 100,y:120},! ! ! ! ! ! ! {x: 100,y:200},! ! ! ! ! ! ! {x: 300,y:200},! ! ! ! ! ! ! {x: 400,y:100}];! ! ! ! ! ! var canvas = document.getElementById(simpleCanvas);
  21. 21. imprimindo pontosif (canvas && canvas.getContext) {! var context = canvas.getContext(2d);! ! ! !! //proximo slide}
  22. 22. imprimindo pontos //configurar largura do canvas canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth;! ! ! ! !! ! //caracteristicas do chart var padding = 10; var widthChart = canvas.width - (2*padding); var heightChart = canvas.width - (2*padding); //tamanho marcadores var size_x = 10; var size_y = 10; var axis_x = 0; var axis_y = 0;
  23. 23. imprimindo pontoscontext.fillStyle = "#fff";context.strokeStyle = "#CCCCCC";context.lineWidth = 20;context.strokeRect(0, 0, canvas.width, canvas.height);context.fillRect(10, 10, widthChart, heightChart);context.fill();var marginLine = 0;context.lineWidth = 1;
  24. 24. imprimindo pontos //descrever linhas! ! for(var numberLine = 0; numberLine < 10; numberLine ++) {! ! ! ! ! ! marginLine = numberLine * (widthChart/10) + padding; context.moveTo(marginLine, padding); context.lineTo(marginLine, canvas.height - padding); context.moveTo(padding, marginLine); context.lineTo(canvas.width - padding, marginLine); }! ! ! ! ! //imprimir linhas context.strokeStyle = "#eee"; context.stroke();
  25. 25. imprimindo pontos//imprimindo os pontosfor(a in data){ axis_x = data[a].x + padding - (size_x/2); axis_y = canvas.height - (data[a].y - (size_y/2)) - 2*padding; context.fillStyle = #cc0000; context.fillRect(axis_x, axis_y, size_x, size_y);}
  26. 26. imprimindo pontos //imprimindo o texto context.font = italic 400 20px Georgia, serif; context.fillStyle = "#666";! ! context.fillText("BrazilJS - Fortaleza 2011", 30, 40,140);! ! context.textAlign = "center";
  27. 27. referências https://developer.mozilla.org/en/Canvas_tutorial http://diveintohtml5.org/canvas.html#divingin http://code.google.com/p/explorercanvas/ http://code.google.com/p/flot/ http://cufon.shoqolate.com/generate/ http://javascript.open-libraries.com/utilities/drawing/draw2d- javascript-drawing-library/ http://philip.html5.org/tests/canvas/suite/tests/results.html http://www.w3.org/TR/SVG/svgdom.html
  28. 28. obrigado ! email@fellipe.com www.fellipe.com @davidsonfellipe github.com/davidsonfellipe

×