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