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 Speciﬁes what property triggers an animation.
CSS3 Selectors-webkit-transform Executes a transformation function scale,rotateX,rotateY,translate
HTML5• Doctype • <!doctype html> • Tells the browser to run in standards mode in accordance with HTML5 spec from the W3C
Canvas• HTML5• Cartesian Coordinate System• Immediate mode• Each frame needs to be completely redrawn• Draw order matters!!
Clearing the Canvas• reset the width of the canvas (preferred)• call clearRect on the area you want to clear
Canvas Cont...<canvas width=”1000” height=”500”> Your browser doesn’t support theHTML5 canvas tag...</canvas>
Canvas Cont...• Remember to set width and height on canvas• width and height are dynamic attributes
Canvas Cont...• 2D Context• canvas.getContext(‘2d’); • returns the 2d context api• 3D Context • canvas.getContext(‘webgl’);
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 ﬂag indicating whether the subpath is closed or not.• A closed subpath is one where the last point is connected to the ﬁrst point by a straight line.
2D Context Methods• ﬁllRect(x, y, width, height)• clearRect(x, y, width, height)• ﬁllStyle(color)• beginPath() - resets path• closePath() - makes path closed
2D Context Methods• arc(x, y, radius, startAngle, endAngle anticlockwise)• ﬁll() - ﬁlls the path with the ﬁllStyle