Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (14)
Similar a Iagc2
Similar a Iagc2 (20)
Último
Último (20)
Iagc2
- 1. While you’re waiting... • Do a ‘git pull’ on the simple_animation repo • Not here last time? • You will want to get: • https://github.com/MacBoyPro/ simple_animation • git@github.com:MacBoyPro/
- 2. Interactive Graphics w/ Javascript, HTML5 and CSS3 Lee Lundrigan
- 3. Today • CSS3 3D transformations • HTML5 Canvas tag
- 4. CSS3
- 5. CSS3 Selectors -webkit-perspective Used to give an illusion of depth; it determines how things change size based on their z-offset from the z=0 plane. -webkit-transition Specifies what property triggers an animation.
- 6. CSS3 Selectors -webkit-transform Executes a transformation function scale,rotateX,rotateY,translate
- 7. Perspective demo • http://www.webkit.org/blog-files/3d- transforms/perspective-by- example.html
- 8. Transform Style Demo • http://www.webkit.org/blog-files/3d- transforms/transform-style.html
- 9. CSS3 Selectors Cont... rotateX(angle), rotateY(angle) Simply rotate the element about the horizontal and vertical axes. Angle units can be: degrees (deg) radians (rad) gradians (grad)
- 10. X Axis 360 deg 0 deg 270 deg 90 deg 180 deg
- 11. Y Axis 0 deg 360 deg 90 deg 270 deg 180 deg
- 12. CSS3 Cube demo
- 13. HTML5 • Doctype • <!doctype html> • Tells the browser to run in standards mode in accordance with HTML5 spec from the W3C
- 14. Canvas • HTML5 • Cartesian Coordinate System • Immediate mode • Each frame needs to be completely redrawn • Draw order matters!!
- 15. Clearing the Canvas • reset the width of the canvas (preferred) • call clearRect on the area you want to clear
- 16. Canvas Cont... <canvas width=”1000” height=”500”> Your browser doesn’t support the HTML5 canvas tag... </canvas>
- 17. Canvas Cont... • Remember to set width and height on canvas • width and height are dynamic attributes
- 18. Canvas Cont... • 2D Context • canvas.getContext(‘2d’); • returns the 2d context api • 3D Context • canvas.getContext(‘webgl’);
- 19. Paths • A list of zero or more subpaths. • Subpaths consists of a list of one or more points, connected by straight or curved lines, and a flag indicating whether the subpath is closed or not. • A closed subpath is one where the last point is connected to the first point by a straight line.
- 20. 2D Context Methods • fillRect(x, y, width, height) • clearRect(x, y, width, height) • fillStyle(color) • beginPath() - resets path • closePath() - makes path closed
- 21. 2D Context Methods • arc(x, y, radius, startAngle, endAngle anticlockwise) • fill() - fills the path with the fillStyle
- 22. Game Time
- 23. References • http://dev.w3.org/html5/2dcontext/ #dom-context-2d-beginpath • http://developer.apple.com/library/ safari/#documentation/InternetWeb/ Conceptual/ SafariVisualEffectsProgGuide/ Introduction/Introduction.html#// apple_ref/doc/uid/TP40008032-CH1- SW1
- 24. References Cont.... • http://www.webkit.org/blog/386/3d- transforms/
Notas del editor
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n