Interactive Graphics
1 like523 views
This document discusses interactive graphics using HTML5 Canvas and CSS3. It provides an overview of 3D effects using CSS3 transformations and Canvas drawing. It then covers specific CSS3 selectors and properties for 3D effects as well as links to examples. It also covers the basics of using the HTML5 Canvas tag including the 2D drawing context and common pathing and drawing methods.
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