HTML5 Canvas PDF
Preview HTML5 Canvas
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., 1005 Gravenstein 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 [email protected]. Editors: Mike Loukides and Simon St.Laurent Indexer: Ellen Troutman Zaig Production Editor: Kristen Borg Cover Designer: Karen Montgomery Copyeditor: Marlowe Shaeffer Interior Designer: David Futato Proofreader: Sada Preisch Illustrator: Robert Romano Printing History: May 2011: First Edition. 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, and related 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 of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained 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 2 <!doctype html> 3 <html lang="en"> 3 <meta charset="UTF-8"> 3 <title>…</title> 3 A Simple HTML5 Page 3 Basic HTML We Will Use in This Book 4 <div> 4 <canvas> 5 The Document Object Model (DOM) and Canvas 5 JavaScript and Canvas 6 JavaScript Frameworks and Libraries 6 Where Does JavaScript Go and Why? 6 HTML5 Canvas “Hello World!” 7 Encapsulating Your JavaScript Code for Canvas 8 Adding Canvas to the HTML Page 9 Testing to See Whether the Browser Supports Canvas 10 Retrieving the 2D Context 11 The drawScreen() Function 11 Debugging with Console.log 14 The 2D Context and the Current State 15 The HTML5 Canvas Object 16 Another Example: Guess The Letter 17 How the Game Works 17 The “Guess The Letter” Game Variables 17 The initGame() Function 19 The eventKeyPressed() Function 19 The drawScreen() Function 21 Exporting Canvas to an Image 22 vii The Final Game Code 23 What’s Next 26 2. Drawing on the Canvas ................................................. 27 The Basic File Setup for This Chapter 27 The Basic Rectangle Shape 28 The Canvas State 29 What’s Not Part of the State? 30 How Do We Save and Restore the Canvas State? 30 Using Paths to Create Lines 30 Starting and Ending a Path 31 The Actual Drawing 31 Examples of More Advanced Line Drawing 32 Advanced Path Methods 34 Arcs 34 Bezier Curves 36 The Canvas Clipping Region 37 Compositing on the Canvas 39 Simple Canvas Transformations 41 Rotation and Translation Transformations 42 Scale Transformations 47 Combining Scale and Rotation Transformations 49 Filling Objects with Colors and Gradients 51 Setting Basic Fill Colors 51 Filling Shapes with Gradients 52 Filling Shapes with Patterns 61 Creating Shadows on Canvas Shapes 64 What’s Next 67 3. The HTML5 Canvas Text API .............................................. 69 Displaying Basic Text 69 Basic Text Display 69 Handling Basic Text in Text Arranger 70 Communicating Between HTML Forms and the Canvas 71 Using measureText 71 fillText and strokeText 73 Setting the Text Font 78 Font Size, Face Weight, and Style Basics 78 Handling Font Size and Face in Text Arranger 79 Font Color 83 Font Baseline and Alignment 86 Text Arranger Version 2.0 90 Text and the Canvas Context 94 viii | Table of Contents
The list of books you might like
