Canvas element
28
CANVAS ELEMENT por davidson fellipe
-
Upload
davidson-fellipe -
Category
Technology
-
view
2.116 -
download
0
description
Apresentação feita no BrazilJS 2011, 13 de maio de 2011, em Fortaleza
Transcript of 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
especificação w3c
implementado para o Safari e Chrome.
browsers baseados no Gecko 1.8 também suportam.
suporte
para não variar...
explorercanvas
<!--[if lt IE9]><script src="excanvas.js"></script><![endif]-->
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
flot
CANVASvs.
SVG
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/
CODE
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 imagemwindow.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/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
obrigado !
www.fellipe.com
@davidsonfellipe
github.com/davidsonfellipe
