Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (18)
Ähnlich wie Interactive Graphics
Ähnlich wie Interactive Graphics (20)
Mehr von Blazing Cloud
Mehr von Blazing Cloud (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Interactive Graphics
- 1. Interactive Graphics 3D effects & Canvas Drawing Lee Lundrigan Sarah Allen
- 2. Class Materials • https://github.com/blazingcloud/ simple_animation • git@github.com:blazingcloud/ simple_animation.git
- 3. Next up • 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/
Hinweis der Redaktion
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n