Core HTML5 Canvas Graphics, Animation, and Game Development

by Geary, David

• ISBN13: 9780132761611
• ISBN10: 0132761610
• Edition: 1st
• Format: Paperback
• Copyright: 2012-05-04
• Publisher: Prentice Hall

Summary

Core HTML5, Volume I: Canvas, takes a code-fueled, no-nonsense, deep dive into one of HTML5's most exciting APIs by showing you how to: ·         Draw and paint ·         Apply shadows, patterns, and gradients ·         Manipulate images ·         Create smooth animations ·         Implement video games ·         Develop custom controls ·         Process video in real time ·         Use off-screen buffers ·         Monitor and increase performance ·         Do lots of other cool graphics stuff Clearly and succinctly written, with real world examples containing code that you can use in your own applications, this guide to Canvas will take you rapidly up the Canvas learning curve, and open a whole new world of possibilities in your browser. The book also comes with a companion website,http://corehtml5canvas.com, which provides access to the book's source code,  videos about HTML5 Canvas, and live demonstrations from the book.

Author Biography

David Geary is a prominent author, speaker, and consultant who teaches developers how to implement web applications. He wrote the best-selling books on both Java component frameworks: Graphic Java 2: Swing, Third Edition (Prentice Hall, 1999), and (with Cay Horstmann) Core JavaServer™ Faces, Third Edition (Prentice Hall, 2010). David is a prolific speaker who is a three-time JavaOne rock star. In 2011, David co-founded the HTML5 Denver meetup group.

Table of Contents

Preface xv

Acknowledgments xxiii

About the Author xxv

 

Chapter 1: Essentials 1

1.1 The canvas Element 1

1.2 Canvas Contexts 8

1.3 Canonical Examples in This Book 12

1.4 Getting Started 14

1.5 Fundamental Drawing Operations 22

1.6 Event Handling 26

1.7 Saving and Restoring the Drawing Surface 33

1.8 Using HTML Elements in a Canvas 36

1.9 Printing a Canvas 46

1.10 Offscreen Canvases 51

1.11 A Brief Math Primer 53

1.12 Conclusion 64

 

Chapter 2: Drawing 65

2.1 The Coordinate System 67

2.2 The Drawing Model 68

2.3 Drawing Rectangles 70

2.4 Colors and Transparency 72

2.5 Gradients and Patterns 76

2.6 Shadows 83

2.7 Paths, Stroking, and Filling 88

2.8 Lines 103

2.9 Arcs and Circles 124

2.10 Bézier Curves 137

2.11 Polygons 144

2.12 Advanced Path Manipulation 150

2.13 Transformations 170

2.14 Compositing 181

2.15 The Clipping Region 187

2.16 Conclusion 198

 

Chapter 3: Text 201

3.1 Stroking and Filling Text 202

3.2 Setting Font Properties 207

3.3 Positioning Text 210

3.4 Implementing Text Controls 225

3.5 Conclusion 252

 

Chapter 4: Images and Video 253

4.1 Drawing Images 254

4.2 Scaling Images 259

4.3 Drawing a Canvas into a Canvas 266

4.4 Offscreen Canvases 270

4.5 Manipulating Images 274

4.6 Clipping Images 302

4.7 Animating Images 306

4.8 Security 312

4.9 Performance 313

4.10 A Magnifying Glass 321

4.11 Video Processing 328

4.12 Conclusion 337

 

Chapter 5: Animation 339

5.1 The Animation Loop 340

5.2 Calculating Frame Rates 358

5.3 Scheduling Tasks at Alternate Frame Rates 359

5.4 Restoring the Background 360

5.5 Double Buffering 364

5.6 Time-Based Motion 367

5.7 Scrolling the Background 370

5.8 Parallax 377

5.9 User Gestures 383

5.10 Timed Animations 385

5.11 Animation Best Practices 390

5.12 Conclusion 391

 

Chapter 6: Sprites 393

6.1 Sprites Overview 394

6.2 Painters 398

6.3 Sprite Behaviors 411

6.4 Sprite Animators 417

6.5 A Sprite-Based Animation Loop 424

6.6 Conclusion 425

 

Chapter 7: Physics 427

7.1 Gravity 428

7.2 Warping Time 450

7.3 Time-Warp Functions 456

7.4 Warping Motion 458

7.5 Warping Animation 473

7.6 Conclusion 482

 

Chapter 8: Collision Detection 483

8.1 Bounding Areas 483

8.2 Bouncing Off Walls 488

8.3 Ray Casting 490

8.4 The Separating Axis Theorem (SAT) and Minimum Translation Vector (MTV) 495

8.5 Conclusion 541

 

Chapter 9: Game Development 543

9.1 A Game Engine 544

9.2 The Ungame 572

9.3 A Pinball Game 589

9.4 Conclusion 614

 

Chapter 10: Custom Controls 615

10.1 Rounded Rectangles 617

10.2 Progress Bars 625

10.3 Sliders 631

10.4 An Image Panner 643

10.5 Conclusion 655

 

Chapter 11: Mobile 657

11.1 The Mobile Viewport 659

11.2 Media Queries 666

11.3 Touch Events 671

11.4 iOS5 677

11.5 A Virtual Keyboard 682

11.6 Conclusion 701

 

Index 703