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.

Ed35943d3199ea37b1b60c39615e8163?s=128

Raphael Amorim

April 11, 2015
Tweet

Transcript

  1. Playground @raphamundi 2015 with CANVAS

  2. @raphamundi

  3. O fantástico mundo do canvas

  4. Conte me mais sobre esse canvas…

  5. Canvas

  6. Canvas goo.gl/73dd0A

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

    o Canvas ?
  8. SWOOOP playcanv.as/p/JtL2iqIH

  9. LucidChart lucidchart.com/documents/demo

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

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

  13. <canvas> <canvas width="500" height="500"></canvas>

  14. <canvas> <canvas width="500" height="500"></canvas> var canvas = document.querySelector(“canvas”), contexto =

    canvas.getContext(“2d”);
  15. None
  16. Sim, Saber geometria ajuda bastante ;)

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

  18. CODE TIME !

  19. requestAnimationFrame

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

  21. Object Recognize + Canvas

  22. Object Recognize + Canvas

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

  24. None
  25. None
  26. engineering.flipboard.com/2015/02/mobile-web/

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

  28. None
  29. github.com/raphamorim/ awesome-canvas

  30. None