Canvas element

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+javascriptespeciﬁcaçã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

9. explorercanvasvar el = document.createElement(canvas);G_vmlCanvasManager.initElement(el);var ctx = el.getContext(2d);

10. EXEMPLOS DE USO

11. ferramentasdraw2D javascript drawinglibrarycufonﬂot

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áﬁcos, 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/ﬂot/ 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

Canvas element

Davidson Fellipe

Canvas element