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.

explorercanvas

explorercanvas

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

ferramentas

draw2D javascript drawing
library
cufon
ﬂot

canvas vs. svg
performance desenhos independente de
2D resolução

salvar resultado em png controle dos elementos
via DOM
adequado para gráﬁcos,
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/

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

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');

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

//tamanho marcadores
var size_x = 10;
var size_y = 10;
var axis_x = 0;
var axis_y = 0;

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;

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

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@fellipe.com
www.fellipe.com
@davidsonfellipe
github.com/davidsonfellipe

Canvas element

Recommended

Recommended

More Related Content

Similar to Canvas element

Similar to Canvas element (20)

More from Davidson Fellipe

More from Davidson Fellipe (20)

Canvas element