Slide 1

Slide 1 text

CANVAS ELEMENT por davidson fellipe

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

assuntos relacionados canvas javascript html 5 canvas x svg

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

suporte

Slide 6

Slide 6 text

para não variar...

Slide 7

Slide 7 text

explorercanvas

Slide 8

Slide 8 text

explorercanvas

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

EXEMPLOS DE USO

Slide 11

Slide 11 text

ferramentas draw2D javascript drawing library cufon flot

Slide 12

Slide 12 text

CANVAS vs. SVG

Slide 13

Slide 13 text

canvas vs. svg performance desenhos 2D salvar resultado em png adequado para gráficos, 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/

Slide 14

Slide 14 text

CODE

Slide 15

Slide 15 text

rotacionando um imagem

Slide 16

Slide 16 text

rotacionando um imagem ! ! ! ! ! ! ! ! Seja mais feliz, não use IE! ! ! ! ! //proximo slide ! ! !

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

imprimindo pontos

Slide 19

Slide 19 text

imprimindo pontos ! ! ! ! ! ! #simpleCanvas{height:520px;width:520px;} ! ! ! ! ! ! ! ! ! Seja mais feliz, não use IE! ! ! ! ! window.onload = function(){ //proximo slide }; ! ! !

Slide 20

Slide 20 text

! ! 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

Slide 21

Slide 21 text

if (canvas && canvas.getContext) { ! var context = canvas.getContext('2d'); ! ! ! ! ! //proximo slide } imprimindo pontos

Slide 22

Slide 22 text

//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;

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

//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

Slide 25

Slide 25 text

//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

Slide 26

Slide 26 text

//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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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