Canvas Element

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 especiﬁcação w3c implementado para o Safari e Chrome. browsers baseados no Gecko 1.8 também suportam.

suporte

para não variar...

explorercanvas

explorercanvas

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

EXEMPLOS DE USO

ferramentas draw2D javascript drawing library cufon ﬂot

CANVAS vs. SVG

canvas vs. svg performance desenhos 2D salvar resultado em png
adequado para gráﬁcos, imagens e manipulaçoes de pixels desempenho constante independente de resolução controle dos elementos via DOM baseado em XML processamento lento a medida que aumenta a complexidade da DOM http://borismus.com/canvas-vs-svg-performance/

rotacionando um imagem

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>

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(); ! } };

imprimindo pontos

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>

! ! 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'); imprimindo pontos

if (canvas && canvas.getContext) { ! var context = canvas.getContext('2d');
! ! ! ! ! //proximo slide } 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); imprimindo pontos //tamanho marcadores var size_x = 10; var size_y = 10; var axis_x = 0; var axis_y = 0;

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; 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(); 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); } 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"; imprimindo pontos

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

obrigado ! [email protected] www.fellipe.com @davidsonfellipe github.com/davidsonfellipe

Canvas Element

Canvas Element

Davidson Fellipe

More Decks by Davidson Fellipe

Other Decks in Programming

Featured

Transcript

CANVAS ELEMENT por davidson fellipe

who ? desenvolvedor na globo.com entusiasta de tecnologias client-side desde

assuntos relacionados canvas javascript html 5 canvas x svg

o que é o elemento canvas? criado pela apple para

suporte

para não variar...

explorercanvas

explorercanvas

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

EXEMPLOS DE USO

ferramentas draw2D javascript drawing library cufon ﬂot

CANVAS vs. SVG

canvas vs. svg performance desenhos 2D salvar resultado em png

CODE

rotacionando um imagem

rotacionando um imagem <!DOCTYPE HTML> <html> ! <head> ! </head>

rotacionando um imagem window.onload = function(){ ! var canvas =

imprimindo pontos

imprimindo pontos <!DOCTYPE HTML> <html> ! <head> ! ! <style

! ! var data = [{x: 0,y:0}, ! ! !

if (canvas && canvas.getContext) { ! var context = canvas.getContext('2d');

//configurar largura do canvas canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth;

context.fillStyle = "#fff"; context.strokeStyle = "#CCCCCC"; context.lineWidth = 20; context.strokeRect(0,

//descrever linhas ! ! for(var numberLine = 0; numberLine <

//imprimindo os pontos for(a in data){ axis_x = data[a].x +

//imprimindo o texto context.font = 'italic 400 20px Georgia, serif';

obrigado ! [email protected] www.fellipe.com @davidsonfellipe github.com/davidsonfellipe