SlideShare uma empresa Scribd logo

Canvas element

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

1 de 28
Baixar para ler offline
CANVAS ELEMENT



por davidson fellipe
who ?


desenvolvedor na globo.com
entusiasta de tecnologias client-side desde 2002
engenheiro da computação
assuntos relacionados

canvas
javascript
html 5
canvas x svg
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.
suporte
para não variar...
Anúncio

Recomendados

Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroEduardo Shiota Yasuda
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no FrontendHenrique Gogó
 
Criação de Ambientes de Realidade Virtual usando A-Frame - CubeCraft Toys -...
Criação de Ambientes  de Realidade Virtual  usando A-Frame - CubeCraft Toys -...Criação de Ambientes  de Realidade Virtual  usando A-Frame - CubeCraft Toys -...
Criação de Ambientes de Realidade Virtual usando A-Frame - CubeCraft Toys -...Jorge Cardoso
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryMarketing Digital ODIG
 
tmn - Introdução ao JavaScript
tmn - Introdução ao JavaScripttmn - Introdução ao JavaScript
tmn - Introdução ao JavaScriptClaudio Gamboa
 

Mais conteúdo relacionado

Semelhante a Canvas element

Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGHelder da Rocha
 
Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3Altair Borges
 
Responsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possívelResponsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possívelSérgio Lima
 
Edição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaEdição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaJorge Walendowsky
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com SassVitor Garcia
 
Frontline - Rails3.1
Frontline - Rails3.1Frontline - Rails3.1
Frontline - Rails3.1Daniel Lopes
 
Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicosponto hacker
 
Responsive web design
Responsive web designResponsive web design
Responsive web designTersis Zonato
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersHarlley Oliveira
 
Evoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com ReactEvoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com ReactGuilherme Garnier
 
Simplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaSimplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaMarianna Cruz Teixeira
 
CSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidadesCSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidadesFellyph Cintra
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-endertdc-globalcode
 

Semelhante a Canvas element (20)

Pew2012
Pew2012Pew2012
Pew2012
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVG
 
Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3
 
Minicurso de HTML5 Canvas -
Minicurso de HTML5 Canvas - Minicurso de HTML5 Canvas -
Minicurso de HTML5 Canvas -
 
Responsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possívelResponsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possível
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
 
Edição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaEdição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a ponta
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
 
Psd to html
Psd to htmlPsd to html
Psd to html
 
Frontline - Rails3.1
Frontline - Rails3.1Frontline - Rails3.1
Frontline - Rails3.1
 
Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicos
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf
 
Evoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com ReactEvoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com React
 
CSS
CSSCSS
CSS
 
Simplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaSimplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na prática
 
CSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidadesCSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidades
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
 

Mais de Davidson Fellipe

O melhor da monitoração de web performance
O melhor da monitoração de web performanceO melhor da monitoração de web performance
O melhor da monitoração de web performanceDavidson Fellipe
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das GaláxiasDavidson Fellipe
 
Workflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.jsWorkflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.jsDavidson Fellipe
 
Como é trabalhar na globocom?
Como é trabalhar na globocom?Como é trabalhar na globocom?
Como é trabalhar na globocom?Davidson Fellipe
 
Practical guide for front-end development for django devs
Practical guide for front-end development for django devsPractical guide for front-end development for django devs
Practical guide for front-end development for django devsDavidson Fellipe
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsDavidson Fellipe
 
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuroFrontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuroDavidson Fellipe
 
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webappsTurbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webappsDavidson Fellipe
 
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend DevelopersWorkflow Open Source para Frontend Developers
Workflow Open Source para Frontend DevelopersDavidson Fellipe
 
Os segredos dos front end engineers
Os segredos dos front end engineersOs segredos dos front end engineers
Os segredos dos front end engineersDavidson Fellipe
 
performance em jQuery apps
performance em jQuery appsperformance em jQuery apps
performance em jQuery appsDavidson Fellipe
 
RioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupoRioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupoDavidson Fellipe
 
frontend {retirante: nordestino;}
frontend {retirante: nordestino;}frontend {retirante: nordestino;}
frontend {retirante: nordestino;}Davidson Fellipe
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011Davidson Fellipe
 
Tutorial Crição De Imagens Panoramicas Hugin
Tutorial Crição De Imagens Panoramicas HuginTutorial Crição De Imagens Panoramicas Hugin
Tutorial Crição De Imagens Panoramicas HuginDavidson Fellipe
 
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PICSistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PICDavidson Fellipe
 
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PICSistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PICDavidson Fellipe
 

Mais de Davidson Fellipe (20)

O melhor da monitoração de web performance
O melhor da monitoração de web performanceO melhor da monitoração de web performance
O melhor da monitoração de web performance
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
Workflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.jsWorkflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.js
 
Como é trabalhar na globocom?
Como é trabalhar na globocom?Como é trabalhar na globocom?
Como é trabalhar na globocom?
 
Practical guide for front-end development for django devs
Practical guide for front-end development for django devsPractical guide for front-end development for django devs
Practical guide for front-end development for django devs
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
 
Esse cara é o grunt
Esse cara é o gruntEsse cara é o grunt
Esse cara é o grunt
 
It's Javascript Time
It's Javascript TimeIt's Javascript Time
It's Javascript Time
 
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuroFrontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
 
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webappsTurbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
 
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend DevelopersWorkflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
 
Os segredos dos front end engineers
Os segredos dos front end engineersOs segredos dos front end engineers
Os segredos dos front end engineers
 
Javascript Cross-browser
Javascript Cross-browserJavascript Cross-browser
Javascript Cross-browser
 
performance em jQuery apps
performance em jQuery appsperformance em jQuery apps
performance em jQuery apps
 
RioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupoRioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupo
 
frontend {retirante: nordestino;}
frontend {retirante: nordestino;}frontend {retirante: nordestino;}
frontend {retirante: nordestino;}
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
 
Tutorial Crição De Imagens Panoramicas Hugin
Tutorial Crição De Imagens Panoramicas HuginTutorial Crição De Imagens Panoramicas Hugin
Tutorial Crição De Imagens Panoramicas Hugin
 
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PICSistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
 
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PICSistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
 

Canvas element

  • 2. who ? desenvolvedor na globo.com entusiasta de tecnologias client-side desde 2002 engenheiro da computação
  • 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.
  • 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
  • 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
  • 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(); ! } };
  • 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