Core HTML5 Canvas: Graphics, Animation, and Game Development (Core Series)
Language: English
Pages: 752
ISBN: 0132761610
Format: PDF / Kindle (mobi) / ePub
Read how David wrote Core HTML5 Canvas: corehtml5canvas.wordpress.com/2012/08/08/the-making-of-core-html5-canvas
The result of two years full-time work by a long-time best-selling author, this book shows you how to implement anything you can imagine with the Canvas 2D API, from text editors to video games. Geary meticulously covers every detail of the API with crystal-clear writing so that you not only understand advanced concepts, but most importantly, you can modify the book's examples for your own specific use cases.
-
The canvas element--using it with other HTML elements, handling events, printing a canvas, and using offscreen canvases
-
Shapes--drawing, dragging, erasing, and editing lines, arcs, circles, curves, and polygons; using shadows, gradients, and patterns
-
Text--drawing, positioning, setting font properties; building text controls
-
Images--drawing, scaling, clipping, processing, and animating
-
Animations--creating smooth, efficient, and portable animations
-
Sprites--implementing animated objects that have painters and behaviors
-
Physics--modeling physical systems (falling bodies, pendulums, and projectiles), and implementing tweening for nonlinear motion and animation
-
Collision detection--advanced techniques, clearly explained
-
Game development--all aspects of game development, such as time-based motion and high score support, implemented in a game engine
-
Custom controls--infrastructure for implementing custom controls; implementing progress bars, sliders, and an image panner
-
Mobile applications--fitting Canvas apps on a mobile screen, using media queries, handling touch events, and specifying iOS5 artifacts, such as app icons
Throughout the book, Geary discusses high-quality, reusable code to help professional developers learn everything they really need to know, with absolutely no fluff. All the book's code and live demonstrations of key examples are available at CoreHTML5Canvas.com.
Smashing CSS: Professional Techniques for Modern Layout
Debuggers All the major browsers that support HTML5 give you access to a console and a debugger. In fact, because browser vendors often borrow ideas from each other, the consoles and debuggers provided by WebKit-based browsers—Firefox, Opera, and IE—are all pretty similar. Figure 1.5 shows the console and debugger for Safari. Figure 1.5 The Safari console and debugger You can write to the console with the console.log() method. Just pass that method a string, and it will appear in the console.
the right side of the equation. Plug simple values whose result you can easily verify into the equation to make sure the equation yields the expected value. 1.12 Conclusion This chapter introduced you to the canvas element and its associated 2d context, and illustrated some essential features of that context, such as the difference between canvas element size and the size of the canvas’s drawing surface. From there we had a quick overview of your development environment, including browsers,
nonzero, so the areas from which they originate are filled by the browser. 2.7.2 Cutouts Let’s use our knowledge of paths, shadows, and the nonzero winding rule to implement cutouts, as shown in Figure 2.15. Figure 2.15 A cutout with two circles The JavaScript for the application shown in Figure 2.15 is listed in Example 2.10. This JavaScript creates a single path that consists of two circles, one inside the other. Using the last argument of the arc() method, the application draws the inner
............................................................................ 5.1.2 Internet Explorer ........................................................................... 5.1.3 A Portable Animation Loop ........................................................ 5.2 Calculating Frame Rates .......................................................................... 5.3 Scheduling Tasks at Alternate Frame Rates .......................................... 5.4 Restoring the Background
y) { this.x = x; this.y = y; } }; When you create a polygon, you specify the polygon’s location, which corresponds to the center of the smallest circle that can enclose the polygon. You also specify the radius of the circle, the number of sides for the polygon, the starting angle for the first point in the polygon, the polygon’s stroke and fill styles, and whether the polygon is filled. Polygons can generate an array of points that represent their vertices, and they can create a path from those