Rockstar Graphics with HTML5 @Media UK
•Download as KEY, PDF•
2 likes•912 views
The document discusses HTML5 features like Canvas and CSS3 that can be used for graphics and animations. Canvas allows drawing on an image tag that can be manipulated with JavaScript. CSS3 enables hardware-accelerated animations and basic 3D effects but is limited compared to Canvas. The document provides examples and recommendations for leveraging different features based on their capabilities and limitations.
Recommended
More Related Content
Viewers also liked
Similar to Rockstar Graphics with HTML5 @Media UK
Similar to Rockstar Graphics with HTML5 @Media UK (20)
Recently uploaded
Recently uploaded (20)
Rockstar Graphics with HTML5 @Media UK
- 1. Rockstar Graphics with HTML5 Dave Balmer @Balmer
- 2. Actually, it’s not HTML5
- 3. “HTML5” is just a buzzword for 7 years worth of neat stuff.*
- 4. These are a few of my favorites.
- 6. Canvas
- 7. Canvas CSS3
- 9. Canvas
- 10. Canvas is like an image tag you can edit.
- 12. Draw shapes, move images around, fiddle with pixels...
- 13. Draw shapes, The browser move images thinks this is just around, fiddle another tag. with pixels...
- 14. Drawing is path based; think “PhotoShop”.
- 15. It’s easy to transform images and paths.
- 18. Use a path as a mask.
- 20. Draw text,* even along a path.**
- 21. Fiddle with pixels and draw images.
- 22. But...
- 23. Canvas lives in the DOM but doesn’t have a DOM.
- 24. “Draw it and forget it.”
- 25. Large image filtering is slow.
- 26. Animations are drawn with JavaScript, which can be slow.
- 27. Frame 1 Frame 2 Frame 3
- 28. Frame 1 Frame 2 Frame 3
- 29. Frame 1 Frame 2 Frame 3
- 30. Frame 1 Frame 2 Frame 3
- 31. Frame 1 Every frame is a complete Frame 2 redraw with your code. Frame 3
- 32. Demo
- 33. CSS3
- 35. Animations use hardware acceleration*, and don’t interrupt your JavaScript.
- 37. But...
- 38. Limited to box-like things.
- 39. Scaled elements can look a bit rough.
- 40. 3D perspective is not broadly supported.
- 41. Demo 2
- 42. Trickery
- 43. Layer elements.
- 44. Move animations to CSS3 where possible.
- 45. Avoid excessive DOM manipulations.
- 46. Respect the garbage collector.
- 47. Keep JavaScript loops tight and efficient.
- 48. Demo 3
- 49. Support
- 50. Desktop Chrome, Safari, FireFox, Opera, IE* *IE9 has support, earlier versions need some help from modernizr.com
- 51. Mobile iOS, Android, webOS, BlackBerry, Opera, Bada
- 52. Wrap Up
- 53. Explore.
- 54. Experiment.
- 55. #WIN
- 56. Q&A @Balmer
Editor's Notes
- \n
- \n
- \n
- \n
- Really, the canvas tag is almost 7 years old, and CSS3 isn’t even an official part of the HTML5 spec. It’s that buzzword thing. Trickery is all about working within the limitations of the browser. Trickery isn’t part of any draft either, so this entire presentation is technically mislabeled.\n
- Really, the canvas tag is almost 7 years old, and CSS3 isn’t even an official part of the HTML5 spec. It’s that buzzword thing. Trickery is all about working within the limitations of the browser. Trickery isn’t part of any draft either, so this entire presentation is technically mislabeled.\n
- Really, the canvas tag is almost 7 years old, and CSS3 isn’t even an official part of the HTML5 spec. It’s that buzzword thing. Trickery is all about working within the limitations of the browser. Trickery isn’t part of any draft either, so this entire presentation is technically mislabeled.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- Draw to a canvas with JavaScript, the browser only knows it’s a box filled with pixels.\n
- You can get at individual pixels in a canvas, and do PhotoShop-like filters on them. Catch is, it’s all in JavaScript, which when you consider iterating through each pixel, adds up fast.\n
- \n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
- \n
- \n
- Actually “very good” for layout, and getting better.\n
- Good browsers use the GPU on your computer or device for CSS3 transitions, and even IE is headed in this direction.\n
- Cheap as in, effort spent to learn, vs. something like webGL.\n
- \n
- Like boxes. And images. In boxes.\n
- Pixels only stretch so far, even with anti-aliasing.\n
- \n
- \n
- Basically, mixing techniques and working to the strengths of each while reducing overhead.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- modernizr is just a starting point, which requires several other libs to do its work. But as starting points go, it’s a good one.\n
- \n
- \n
- \n
- \n
- \n
- \n