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.

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