Successfully reported this slideshow.

Canvas element

2

Share

Upcoming SlideShare
Nova web - DNAD 2012
Nova web - DNAD 2012
Loading in …3
×
1 of 28
1 of 28

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Canvas element

  1. 1. CANVAS ELEMENT por davidson fellipe
  2. 2. who ? desenvolvedor na globo.com entusiasta de tecnologias client-side desde 2002 engenheiro da computação
  3. 3. assuntos relacionados canvas javascript html 5 canvas x svg
  4. 4. o que é o elemento canvas? criado pela apple para os widgets do Dashboard OS X desenhos bitmap 2D, 3D (futuro) html+javascript especificação w3c implementado 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. explorercanvas var el = document.createElement('canvas'); G_vmlCanvasManager.initElement(el); var ctx = el.getContext('2d');
  10. 10. EXEMPLOS DE USO
  11. 11. ferramentas draw2D javascript drawing library cufon flot
  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 DOM http://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 imagem window.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 pontos if (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 pontos context.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 pontos for(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

×