HTML5 Canvas
HTML5 Canvas
Chapter 1 Introduction to HTML5 Canvas
The Basic HTML Page
Basic HTML We Will Use in This Book
The Document Object Model (DOM) and Canvas
JavaScript and Canvas
HTML5 Canvas “Hello World!”
Debugging with Console.log
The 2D Context and the Current State
The HTML5 Canvas Object
Another Example: Guess The Letter
What’s Next
Chapter 2 Drawing on the Canvas
The Basic File Setup for This Chapter
The Basic Rectangle Shape
The Canvas State
Using Paths to Create Lines
Advanced Path Methods
Compositing on the Canvas
Simple Canvas Transformations
Filling Objects with Colors and Gradients
Filling Shapes with Patterns
Creating Shadows on Canvas Shapes
What’s Next
Chapter 3 The HTML5 Canvas Text API
Displaying Basic Text
Setting the Text Font
Text and the Canvas Context
Text with Gradients and Patterns
Width, Height, Scale, and toDataURL() Revisited
Final Version of Text Arranger
What’s Next
Chapter 4 Images on the Canvas
The Basic File Setup for This Chapter
Image Basics
Simple Cell-Based Sprite Animation
Advanced Cell-Based Animation
Applying Rotation Transformations to an Image
Creating a Grid of Tiles
Zooming and Panning an Image
Pixel Manipulation
Copying from One Canvas to Another
What’s Next
Chapter 5 Math, Physics, and Animation
Moving in a Straight Line
Bouncing Off Walls
Curve and Circular Movement
Simple Gravity, Elasticity, and Friction
Easing
What’s Next?
Chapter 6 Mixing HTML5 Video and Canvas
HTML5 Video Support
Converting Video Formats
Basic HTML5 Video Implementation
Preloading Video in JavaScript
Video and the Canvas
Video on the Canvas Examples
Animation Revisited: Moving Videos
What’s Next?
Chapter 7 Working with Audio
The Basic <audio> Tag
Audio Formats
Audio Tag Properties, Functions, and Events
Playing a Sound with No Audio Tag
Creating a Canvas Audio Player
Case Study in Audio: Space Raiders Game
What’s Next
Chapter 8 Canvas Game Essentials
Why Games in HTML5?
Our Basic Game HTML5 File
Our Game’s Design
Game Graphics: Drawing with Paths
Animating on the Canvas
Applying Transformations to Game Graphics
Game Graphic Transformations
Game Object Physics and Animation
A Basic Game Framework
Putting It All Together
The player Object
Geo Blaster Game Algorithms
The Geo Blaster Basic Full Source
Rock Object Prototype
What’s Next
Chapter 9 Combining Bitmaps and Sound
Geo Blaster Extended
Creating a Dynamic Tile Sheet at Runtime
A Simple Tile-Based Game
What’s Next
Chapter 10 Mobilizing Games with PhoneGap
Going Mobile!
Creating the iOS Application with PhoneGap
Beyond the Canvas
What’s Next
Chapter 11 Further Explorations
3D with WebGL
Multiplayer Applications with ElectroServer 5
Conclusion
Description: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