Canvas Element

1. CANVAS ELEMENT por davidson fellipe
2. who ? desenvolvedor na globo.com entusiasta de tecnologias client-side desde 2002 engenheiro da computação
3. assuntos relacionados canvas javascript html 5 canvas x svg
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. suporte
6. para não variar...
7. explorercanvas
8. <!--[if lt IE9]> <script src="excanvas.js"></script> <![endif]--> explorercanvas
9. var el = document.createElement('canvas'); G_vmlCanvasManager.initElement(el); var ctx = el.getContext('2d'); explorercanvas
10. EXEMPLOS DE USO
11. ferramentas draw2D javascript drawing library cufon flot
12. CANVAS vs. SVG
13. canvas vs. svg performance desenhos 2D salvar resultado em png adequado para gráficos, imagens e manipulaçoes de pixels desempenho constante independente de resolução controle dos elementos via DOM baseado em XML processamento lento a medida que aumenta a complexidade da DOM http://borismus.com/canvas-vs-svg-performance/
14. CODE
15. rotacionando um imagem
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. 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. imprimindo pontos
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. ! ! 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'); imprimindo pontos
21. if (canvas && canvas.getContext) { ! var context = canvas.getContext('2d'); ! ! ! ! ! //proximo slide } imprimindo pontos
22. //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); imprimindo pontos //tamanho marcadores var size_x = 10; var size_y = 10; var axis_x = 0; var axis_y = 0;
23. 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; imprimindo pontos
24. //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(); imprimindo pontos
25. //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); } imprimindo pontos
26. //imprimindo o texto context.font = 'italic 400 20px Georgia, serif'; context.fillStyle = "#666"; ! ! context.fillText("BrazilJS - Fortaleza 2011", 30, 40, 140); ! ! context.textAlign = "center"; imprimindo pontos
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. obrigado ! email@fellipe.com www.fellipe.com @davidsonfellipe github.com/davidsonfellipe