![explorercanvas
<!--[if lt IE9]>
<script src="excanvas.js"></script>
<![endif]-->](https://image.slidesharecdn.com/canvaselement-110515215812-phpapp01/85/canvas-element-8-320.jpg?cb=1305496906)
![imprimindo pontos
//imprimindo os pontos
for(a in data){
axis_x = data[a].x +
padding - (size_x/2);
...](https://image.slidesharecdn.com/canvaselement-110515215812-phpapp01/85/canvas-element-25-320.jpg?cb=1305496906)
Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 14 day trial from Scribd
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. explorercanvas <!--[if lt IE9]> <script src="excanvas.js"></script> <![endif]-->
- 9. explorercanvas var el = document.createElement('canvas'); G_vmlCanvasManager.initElement(el); var ctx = el.getContext('2d');
- 10. EXEMPLOS DE USO
- 11. ferramentas draw2D javascript drawing library cufon flot
- 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 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. 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 pontos if (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 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. 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 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. 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