Transferir como PDF, PPTX
![explorercanvas
<!--[if lt IE9]>
<script src="excanvas.js"></script>
<![endif]-->](https://image.slidesharecdn.com/canvaselement-110515215812-phpapp01/85/Canvas-element-8-320.jpg)
![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');](https://image.slidesharecdn.com/canvaselement-110515215812-phpapp01/85/Canvas-element-20-320.jpg)
![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);
}](https://image.slidesharecdn.com/canvaselement-110515215812-phpapp01/85/Canvas-element-25-320.jpg)
Carregado porDavidson Fellipe
Canvas element
O elemento canvas permite desenhos bitmap 2D e 3D no HTML usando JavaScript. Foi criado pela Apple e é suportado pelos principais navegadores, exceto no Internet Explorer que requer o uso do ExplorerCanvas. Exemplos demonstram como rotacionar imagens e imprimir pontos no canvas.
Canvas element
- 1. CANVAS ELEMENT por davidsonfellipe
- 2. who ? desenvolvedor naglobo.com entusiasta de tecnologias client-side desde 2002 engenheiro da computação
- 3.
- 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.
- 6.
- 7.
- 8. explorercanvas <!--[if lt IE9]> <scriptsrc="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.
- 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.
- 15.
- 16. rotacionando um imagem <!DOCTYPEHTML> <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.
- 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 ospontos 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