Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Canvas vs SVG

Canvas vs SVG

Avatar for Davidson Fellipe

Davidson Fellipe

April 24, 2012
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

Transcript

  1. CANVAS •Criado para widgets do Dashboard OS X e Safari

    •Desenhos bitmap 2D, 3D •HTML5 •API JAVASCRIPT •ESPECIFICAÇÃO W3C
  2. CANVAS •Drawing tools (retângulos, arcos, linhas) •Efeitos (fill, bordas, gradientes,

    transparência) •Transformações (rotação, translação, matrizes ) •Carregar dados a partir de um data URI
  3. SVG •Sun Microsystems, Adobe, Apple, IBM, e Kodak são uma

    das que estão envolvidas com o padrão. •Independente de resolução (vetor) •Controle dos elementos via DOM •Imagens representadas em XML •Processamento lento a medida que aumenta a complexidade da DOM
  4. <!--[if lt IE9]> <script src="excanvas.js"></script> <![endif]--> EXCANVAS var el =

    document.createElement('canvas'); G_vmlCanvasManager.initElement(el); var ctx = el.getContext('2d');
  5. LINKS • http://berjon.com/blog/2010/09/bouncy.xhtml • http://raphaeljs.com/australia.html • http://raphaeljs.com/analytics.html • http://futpedia.globo.com/confronto/vasco-x-flamengo •

    http://raphaeljs.com/image-rotation.html • http://dev.w3.org/html5/spec/Overview.html • http://dev.w3.org/html5/canvas-api/canvas-2d-api.html