Professional Documents
Culture Documents
moves
they.will (_) ->
_.watch it
• Canvas
• SVG
• CSS3
• Other low-level techniques we won’t cover
c = document
.getElementById 'c'
.getContext '2d'
• Manual redrawing
• Main draw loop
• Clear canvas
• Change position
• Draw objects
• Manual, too
• Get x/y from click event
• Custom collision detection
• ProcessingJS
• three.js
• 100% flexibility
• Very fast for some things
• Read image data to jpeg/png
• Resolution dependent
• Not accessible
• Text rendering... not trivial
• http://9elements.com/io/projects/html5/
canvas/
• http://networkmap.projects.9elements.de/
• http://9elements.com/projects/bbc_final/
• XML
• 2D vector graphics
• Filters, animations, sounds (WTF!), etc
• DOM based
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="980" height="400">
</svg>
• Raphaël
• Declarative JS > XML
• Has a cool animate function
• VML fallback for IE
• Easy!
• Use browser’s native capabilities
• Just addEventListener
• No pixel manipulation
• Usually slower than canvas
• Needs Raphaël for backwards comp.
• http://hackfwd.com/dilution
• http://9elements.com/projects/mozilla/
• Effects? webkitTransition!
• Animation?
• webkitTransition
• webkitAnimation
Animated
property
Animated
Duration
property
Animated Timing
Duration
property Function
• translate3d(x, y, z)
• scale3d(x, y, z)
• rotateX(a), rotateY(a), rotateZ(a)
• matrix3d(...)
if mobile?
'css3'
else
lasers()