Web Development

Core HTML5 Canvas: Graphics, Animation, and Game Development (Core Series)

Core HTML5 Canvas: Graphics, Animation, and Game Development (Core Series)

Language: English

Pages: 752

ISBN: 0132761610

Format: PDF / Kindle (mobi) / ePub


Download the book's code and a free chapter at corehtml5canvas.com 

Read how David wrote Core HTML5 Canvas: corehtml5canvas.wordpress.com/2012/08/08/the-making-of-core-html5-canvas

Check out David's article series on HTML5 2D Game Development at IBM's developerworks: ibm.com/developerworks/library/j-html5-game1

This book is a painstakingly crafted, expertly written, code-fueled, no-nonsense deep dive into HTML5 Canvas printed in full color with syntax-highlighted code listings throughout. 

Core HTML5 Canvas is written for experienced software developers with an intermediate-level understanding of JavaScript. 

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.

Here are some of the things you will learn about in this book:
  • 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.

The Uncertain Web

Learning AngularJS Animations

HTML5: Up and Running

HTML5: Up and Running

Smashing CSS: Professional Techniques for Modern Layout

PHP jQuery Cookbook

 

 

 

 

 

 

 

 

 

 

 

 

 

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

Download sample

Download