Informatica Html5

Download from Wow! eBook

HTML5 Canvas

HTML5 Canvas
Native Interactivity and Animation for the Web

Steve Fulton and Jeff Fulton

Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo

HTML5 Canvas
by Steve Fulton and Jeff Fulton
Copyright © 2011 8bitrocket Studios. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com.

Editors: Mike Loukides and Simon St.Laurent Production Editor:Kristen Borg Copyeditor: Marlowe Shaeffer Proofreader: Sada Preisch Printing History:
May 2011: First Edition.

Indexer: Ellen Troutman Zaig Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrator: Robert Romano

Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. HTML5 Canvas, the image of a kaka parrot, andrelated trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation ofthis book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

ISBN: 978-1-449-39390-8 [LSI] 1303735727

To Flash.

Table of Contents

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv 1.Introduction to HTML5 Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
The Basic HTML Page … A Simple HTML5 Page Basic HTML We Will Use in This Book The Document Object Model (DOM) and Canvas JavaScript and Canvas JavaScript Frameworks and Libraries Where Does JavaScript Go and Why? HTML5 Canvas “Hello World!” Encapsulating Your JavaScript Codefor Canvas Adding Canvas to the HTML Page Testing to See Whether the Browser Supports Canvas Retrieving the 2D Context The drawScreen() Function Debugging with Console.log The 2D Context and the Current State The HTML5 Canvas Object Another Example: Guess The Letter How the Game Works The “Guess The Letter” Game Variables The initGame() Function The eventKeyPressed() Function The drawScreen()Function Exporting Canvas to an Image 2 3 3 3 3 3 4 4 5 5 6 6 6 7 8 9 10 11 11 14 15 16 17 17 17 19 19 21 22
vii

The Final Game Code What’s Next

23 26

2. Drawing on the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
The Basic File Setup for This Chapter The Basic Rectangle Shape The Canvas State What’s Not Part of the State? HowDo We Save and Restore the Canvas State? Using Paths to Create Lines Starting and Ending a Path The Actual Drawing Examples of More Advanced Line Drawing Advanced Path Methods Arcs Bezier Curves The Canvas Clipping Region Compositing on the Canvas Simple Canvas Transformations Rotation and Translation Transformations Scale Transformations Combining Scale and Rotation Transformations FillingObjects with Colors and Gradients Setting Basic Fill Colors Filling Shapes with Gradients Filling Shapes with Patterns Creating Shadows on Canvas Shapes What’s Next 27 28 29 30 30 30 31 31 32 34 34 36 37 39 41 42 47 49 51 51 52 61 64 67

3. The HTML5 Canvas Text API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Displaying Basic Text Basic Text...