Synopses & Reviews
HTML5 is revolutionizing the way web applications are developed, and this practical, hands-on book puts you right in the middle of the action. You'll learn how to build interactive multimedia applications with HTML5's Canvas, using this new element to draw, animate, compose images, and more. You'll also learn the best way to use existing JavaScript libraries, as well as how to incorporate related aspects such as audio and video.
Ideal for web developers and experienced Flash and Silverlight developers, HTML5 Canvas shows you how to build several interactive web games as a way to learn the topics presented. The book also includes tips for Flash developers on how to transfer their skills to HTML5 programming. Now is the time to join the HTML5 revolution, and this is the book to get you started.
- Get an introduction to working with HTML 5 Canvas and JavaScript
- Create an application to learn how to use HTML5 text and text animation
- Learn how to use the image API, and create an application using drag-and-drop
- Create an advanced arcade game to learn about HTML5's
Synopsis
No matter what platform or tools you use, the HTML5 revolution will soon change the way you build web applications, if it hasn't already. HTML5 is jam-packed with features, and there's a lot to learn. This book gets you started with the Canvas element, perhaps HTML5's most exciting feature. Learn how to build interactive multimedia applications using this element to draw, render text, manipulate images, and create animation.
Whether you currently use Flash, Silverlight, or just HTML and JavaScript, you'll quickly pick up the basics. Practical examples show you how to create various games and entertainment applications with Canvas as you learn. Gain valuable experience with HTML5, and discover why leading application developers rave about this specification as the future of truly innovative web development.
- Create and modify 2D drawings, text, and bitmap images
- Incorporate and manipulate video, and add audio
- Build a basic framework for creating a variety of games on Canvas
- Use bitmaps and tile sheets to develop animated game graphics
- Go mobile: port Canvas applications to iPhone with PhoneGap
- Explore ways to use Canvas for 3D and multiplayer game applications
About the Author
Steve is an R.I.A. and web game developer who has been cultivating an audience for news, stories, blogs and tutorials about Flash, Silverlight, and now the HTML 5 Canvas at their own web site, http://www.8bitrocket.com, for the past 3 1/2 years. He has one of the highest Alexa rankings among Flash game developers blogs.
Steve has worked as a web development manager at Mattel Toys for the past 14 years, helping to create Mattels extensive online presence.
Jeff is an R.I.A. and web game developer who has been cultivating an audience for news, stories, blogs and tutorials about Flash, Silverlight, and now the HTML 5 Canvas at their own web site, http://www.8bitrocket.com, for the past 3 1/2 years. He has one of the highest Alexa rankings among Flash game developers blogs.
Jeff has worked as a web development manager at Mattel Toys for the past 14 years, helping to create Mattels extensive online presence.
Table of Contents
Preface; Running the Examples in the Book; What You Need to Know; How This Book Is Organized; Conventions Used in This Book; Using Code Examples; We'd Like to Hear from You; Safari® Books Online; Acknowledgments; Chapter 1: Introduction to HTML5 Canvas; 1.1 The Basic HTML Page; 1.2 Basic HTML We Will Use in This Book; 1.3 The Document Object Model (DOM) and Canvas; 1.4 JavaScript and Canvas; 1.5 HTML5 Canvas "Hello World!"; 1.6 Debugging with Console.log; 1.7 The 2D Context and the Current State; 1.8 The HTML5 Canvas Object; 1.9 Another Example: Guess The Letter; 1.10 What's Next; Chapter 2: Drawing on the Canvas; 2.1 The Basic File Setup for This Chapter; 2.2 The Basic Rectangle Shape; 2.3 The Canvas State; 2.4 Using Paths to Create Lines; 2.5 Advanced Path Methods; 2.6 Compositing on the Canvas; 2.7 Simple Canvas Transformations; 2.8 Filling Objects with Colors and Gradients; 2.9 Filling Shapes with Patterns; 2.10 Creating Shadows on Canvas Shapes; 2.11 What's Next; Chapter 3: The HTML5 Canvas Text API; 3.1 Displaying Basic Text; 3.2 Setting the Text Font; 3.3 Text and the Canvas Context; 3.4 Text with Gradients and Patterns; 3.5 Width, Height, Scale, and toDataURL() Revisited; 3.6 Final Version of Text Arranger; 3.7 What's Next; Chapter 4: Images on the Canvas; 4.1 The Basic File Setup for This Chapter; 4.2 Image Basics; 4.3 Simple Cell-Based Sprite Animation; 4.4 Advanced Cell-Based Animation; 4.5 Applying Rotation Transformations to an Image; 4.6 Creating a Grid of Tiles; 4.7 Zooming and Panning an Image; 4.8 Pixel Manipulation; 4.9 Copying from One Canvas to Another; 4.10 What's Next; Chapter 5: Math, Physics, and Animation; 5.1 Moving in a Straight Line; 5.2 Bouncing Off Walls; 5.3 Curve and Circular Movement; 5.4 Simple Gravity, Elasticity, and Friction; 5.5 Easing; 5.6 What's Next?; Chapter 6: Mixing HTML5 Video and Canvas; 6.1 HTML5 Video Support; 6.2 Converting Video Formats; 6.3 Basic HTML5 Video Implementation; 6.4 Preloading Video in JavaScript; 6.5 Video and the Canvas; 6.6 Video on the Canvas Examples; 6.7 Animation Revisited: Moving Videos; 6.8 What's Next?; Chapter 7: Working with Audio; 7.1 The Basic