Canvas element

2.477 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.477
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
41
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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

×