Your SlideShare is downloading. ×
Canvas element
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Canvas element

2,102

Published on

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

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,102
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CANVAS ELEMENTpor davidson fellipe
  • 2. who ?desenvolvedor na globo.comentusiasta de tecnologias client-side desde 2002engenheiro da computação
  • 3. assuntos relacionadoscanvasjavascripthtml 5canvas x svg
  • 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. suporte
  • 6. para não variar...
  • 7. explorercanvas
  • 8. explorercanvas<!--[if lt IE9]><script src="excanvas.js"></script><![endif]-->
  • 9. explorercanvasvar el = document.createElement(canvas);G_vmlCanvasManager.initElement(el);var ctx = el.getContext(2d);
  • 10. EXEMPLOS DE USO
  • 11. ferramentasdraw2D javascript drawinglibrarycufonflot
  • 12. CANVAS vs. SVG
  • 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. 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 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. 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. 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. imprimindo pontosif (canvas && canvas.getContext) {! var context = canvas.getContext(2d);! ! ! !! //proximo slide}
  • 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. 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. 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. 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. 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. 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

×