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

Playground with canvas.

Playground with canvas.

Canvas é uma tela de bitmap que pode ser usada para a renderização de elementos gráficos ou outras imagens visuais rapidamente. No HTML5 ele permite que se desenhem elementos gráficos usando JavaScript. Vamos abordar funcionalidades e recursos e porque você deveria estar pensando em utilizar o canvas no seu próximo projeto.

Raphael Amorim

April 11, 2015
Tweet

More Decks by Raphael Amorim

Other Decks in Programming

Transcript

  1. Playground
    @raphamundi 2015
    with
    CANVAS

    View Slide

  2. @raphamundi

    View Slide

  3. O fantástico mundo do canvas

    View Slide

  4. Conte me mais sobre esse canvas…

    View Slide

  5. Canvas

    View Slide

  6. Canvas
    goo.gl/73dd0A

    View Slide

  7. Okay, mas o que eu consigo
    fazer de legal com
    o Canvas ?

    View Slide

  8. SWOOOP
    playcanv.as/p/JtL2iqIH

    View Slide

  9. LucidChart
    lucidchart.com/documents/demo

    View Slide

  10. Inception Experiment
    raphamorim.com/canvas-experiments/inception

    View Slide

  11. View Slide

  12. Sim,
    Mas esse é só o topo
    do iceberg :)

    View Slide



  13. View Slide



  14. var canvas = document.querySelector(“canvas”),
    contexto = canvas.getContext(“2d”);

    View Slide

  15. View Slide

  16. Sim,
    Saber geometria
    ajuda bastante ;)

    View Slide

  17. Coordinates
    y
    x
    (0, 0)
    (largura, altura)

    View Slide

  18. CODE TIME !

    View Slide

  19. requestAnimationFrame

    View Slide

  20. requestAnimationFrame
    paulirish.com/2011/requestanimationframe-for-smart-animating/

    View Slide

  21. Object Recognize + Canvas

    View Slide

  22. Object Recognize + Canvas

    View Slide

  23. Object Recognize + Canvas
    raphamorim.com/canvas-experiments/scroll

    View Slide

  24. View Slide

  25. View Slide

  26. engineering.flipboard.com/2015/02/mobile-web/

    View Slide

  27. engineering.flipboard.com/2015/02/mobile-web/

    View Slide

  28. View Slide

  29. github.com/raphamorim/
    awesome-canvas

    View Slide

  30. View Slide