Core HTML5 Canvas

1y ago
2.77 MB
112 Pages
Last View : 14d ago
Last Download : 1y ago
Upload by : Ronan Orellana

Core HTML5 Canvas

This page intentionally left blank

Core HTML5 CanvasGraphics, Animation, and GameDevelopmentDavid GearyUpper Saddle River, NJ Boston Indianapolis San FranciscoNew York Toronto Montreal London Munich Paris MadridCapetown Sydney Tokyo Singapore Mexico City

Many of the designations used by manufacturers and sellers to distinguish their products are claimedas trademarks. Where those designations appear in this book, and the publisher was aware of a trademarkclaim, the designations have been printed with initial capital letters or in all capitals.The author and publisher have taken care in the preparation of this book, but make no expressed orimplied warranty of any kind and assume no responsibility for errors or omissions. No liability isassumed for incidental or consequential damages in connection with or arising out of the use of theinformation or programs contained herein.The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases orspecial sales, which may include electronic versions and/or custom covers and content particular toyour business, training goals, marketing focus, and branding interests. For more information, pleasecontact:U.S. Corporate and Government Sales(800) 382–3419corpsales@pearsontechgroup.comFor sales outside the United States, please contact:International Salesinternational@pearson.comVisit us on the Web: of Congress Cataloging-in-Publication DataGeary, David M.Core HTML5 canvas : graphics, animation, and game development / DavidGeary.p. cm.Includes index.ISBN 978-0-13-276161-1 (pbk. : alk. paper)1. HTML (Document markup language) 2. Computer games—Programming. 3.Computer animation. I. Title.QA76.76.H94C66 2012006.6'6—dc232012006871Copyright 2012 David GearyAll rights reserved. Printed in the United States of America. This publication is protected by copyright,and permission must be obtained from the publisher prior to any prohibited reproduction, storage in aretrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying,recording, or likewise. To obtain permission to use material from this work, please submit a writtenrequest to Pearson Education, Inc., Permissions Department, One Lake Street, Upper Saddle River, NewJersey 07458, or you may fax your request to (201) 236-3290.ISBN-13: 978-0-13-276161-1ISBN-10:0-13-276161-0Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, Indiana.First printing, May 2012

ContentsPreface . xvAcknowledgments . xxiiiAbout the Author . xxvChapter 1: Essentials . canvas Element . 11.1.1 Canvas Element Size vs. Drawing Surface Size . 51.1.2 The Canvas API . 7Canvas Contexts . 81.2.1 The 2d Context . The WebGL 3d Context . 111.2.2 Saving and Restoring Canvas State . 11Canonical Examples in This Book . 12Getting Started . 141.4.1 Specifications . 141.4.2 Browsers . 151.4.3 Consoles and Debuggers . 161.4.4 Performance . Profiles and Timelines . jsPerf . 20Fundamental Drawing Operations . 22Event Handling . 261.6.1 Mouse Events . Translating Mouse Coordinates to CanvasCoordinates . 261.6.2 Keyboard Events . 311.6.3 Touch Events . 33Saving and Restoring the Drawing Surface . 33Using HTML Elements in a Canvas . 361.8.1 Invisible HTML Elements . 41v

viContents1.9 Printing a Canvas .1.10 Offscreen Canvases .1.11 A Brief Math Primer .1.11.1 Solving Algebraic Equations .1.11.2 Trigonometry . Angles: Degrees and Radians . Sine, Cosine, and Tangent .1.11.3 Vectors . Vector Magnitude . Unit Vectors . Adding and Subtracting Vectors . The Dot Product of Two Vectors .1.11.4 Deriving Equations from Units of Measure .1.12 Conclusion .4651535454545556575859606264Chapter 2: Drawing . 652. Coordinate System . 67The Drawing Model . 68Drawing Rectangles . 70Colors and Transparency . 72Gradients and Patterns . 762.5.1 Gradients . 762.5.1.1 Linear Gradients . 762.5.1.2 Radial Gradients . 782.5.2 Patterns . 79Shadows . 832.6.1 Inset Shadows . 85Paths, Stroking, and Filling . 882.7.1 Paths and Subpaths . 932.7.1.1 The Nonzero Winding Rule for Filling Paths . 942.7.2 Cutouts . 952.7.2.1 Cutout Shapes . 98Lines . 1032.8.1 Lines and Pixel Boundaries . 1042.8.2 Drawing a Grid . 105

42.152.16Drawing Axes .Rubberband Lines .Drawing Dashed Lines .Drawing Dashed Lines by ExtendingCanvasRenderingContext2D .2.8.7 Line Caps and Joins .Arcs and Circles .2.9.1 The arc() Method .2.9.2 Rubberband Circles .2.9.3 The arcTo() Method .2.9.4 Dials and Gauges .Bézier Curves .2.10.1 Quadratic Curves .2.10.2 Cubic Curves .Polygons .2.11.1 Polygon Objects .Advanced Path Manipulation .2.12.1 Dragging Polygons .2.12.2 Editing Bézier Curves .2.12.3 Scrolling Paths into View .Transformations .2.13.1 Translating, Scaling, and Rotating . Mirroring .2.13.2 Custom Transformations . Algebraic Equations for Transformations . Using transform() and setTransform() . Translating, Rotating, and Scaling with transform()and setTransform() . Shear .Compositing .2.14.1 The Compositing Controversy .The Clipping Region .2.15.1 Erasing with the Clipping Region .2.15.2 Telescoping with the Clipping Region .Conclusion vii

viiiContentsChapter 3: Text . 2013. and Filling Text .Setting Font Properties .Positioning Text .3.3.1 Horizontal and Vertical Positioning .3.3.2 Centering Text .3.3.3 Measuring Text .3.3.4 Labeling Axes .3.3.5 Labeling Dials .3.3.6 Drawing Text around an Arc .Implementing Text Controls .3.4.1 A Text Cursor . Erasing . Blinking .3.4.2 Editing a Line of Text in a Canvas .3.4.3 Paragraphs . Creating and Initializing a Paragraph . Positioning the Text Cursor in Response to MouseClicks . Inserting Text . New Lines . Backspace .Conclusion 42243244245252Chapter 4: Images and Video . 2534. Images .4.1.1 Drawing an Image into a Canvas .4.1.2 The drawImage() Method .Scaling Images .4.2.1 Drawing Images outside Canvas Boundaries .Drawing a Canvas into a Canvas .Offscreen Canvases .Manipulating Images .4.5.1 Accessing Image Data . ImageData Objects .254255257259260266270274274279

Contents4.5.1.2Image Data Partial Rendering: putImageData’s DirtyRectangle .4.5.2 Modifying Image Data . Creating ImageData Objects withcreateImageData() . The Image Data Array . Image Data Looping Strategies . Filtering Images . Device Pixels vs. CSS Pixels, Redux . Image Processing Web Workers .4.6 Clipping Images .4.7 Animating Images .4.7.1 Animating with an Offscreen Canvas .4.8 Security .4.9 Performance .4.9.1 drawImage(HTMLImage) vs. drawImage(HTMLCanvas) vs.putImageData() .4.9.2 Drawing a Canvas vs. Drawing an Image, into a Canvas;Scaled vs. Unscaled .4.9.3 Looping over Image Data . Avoid Accessing Object Properties in the Loop: StoreProperties in Local Variables Instead . Loop over Every Pixel, Not over Every Pixel Value . Looping Backwards and Bit-Shifting Are CrapShoots . Don’t Call getImageData() Repeatedly for SmallAmounts of Data .4.10 A Magnifying Glass .4.10.1 Using an Offscreen Canvas .4.10.2 Accepting Dropped Images from the File System .4.11 Video Processing .4.11.1 Video Formats . Converting Formats .4.11.2 Playing Video in a Canvas .4.11.3 Processing Videos .4.12 Conclusion 17320320321321325326328329330331333337ix

xContentsChapter 5: Animation . 3395.1The Animation Loop .5.1.1 The requestAnimationFrame() Method: Letting the BrowserSet the Frame Rate . Firefox . Chrome .5.1.2 Internet Explorer .5.1.3 A Portable Animation Loop .5.2 Calculating Frame Rates .5.3 Scheduling Tasks at Alternate Frame Rates .5.4 Restoring the Background .5.4.1 Clipping .5.4.2 Blitting .5.5 Double Buffering .5.6 Time-Based Motion .

Core HTML5 Canvas Graphics, Animation, and Game Development David Geary Upper Saddle River, NJ Boston Indianapolis San Francisco New York Toronto Montreal London Munich Paris Madrid

Related Documents:

[HTML5 강좌 및 동영상 목록] [HTML5 동상 강좌] 1. HTML 5 개요 [HTML5 동상 강좌] 2. HTML4 vs HTML5 (1) [HTML5 동상 강좌] 3. HTML4 vs HTML5 (2) [HTML5 동상 강좌] 4. Sementic Element (1) [HTML5 동상 강좌] 5. Sementic Element (2) [HTML5 동상 강좌] 6. Strong Web Form [HTML5 동상 강좌] 7. Rich Text Edit API [HTML5 동상 강좌] 8. Video Element [HTML5 동상 강좌] 9.

A table of contents for Canvas use. Guias de Canvas Canvas User Guide for Faculty A table of contents links to Canvas tools for Faculty. Canvas Community Find answers, share ideas, and join groups. Fresno Canvas Support (844) 303-0348 Clovis Canvas Support (844) 629-6836 Reedley Canvas Support (844) 629-6837 Chat with Canvas Support (Student)

Pg. 03 PSD to HTML5 PSD to HTML5 CSS3 and JavaScript PSD to HTML5 This manual will outline all the steps required to convert your PSD to HTML5 in a few clicks. Export Kit makes PSD to HTML5 and CSS websites quick, easy and painless. In minutes you can have clean and valid PSD to H

Formation HTML5 / CSS3 l’informatique. 2 1 - Introduction Pourquoi HTML5 et SS3 ? ompatiilité ave les navigateurs Prinipales différen es entre HTML5 et ses prédéesseurs Installation logiielle 2 - Les bases du HTML5/CSS3 Délaration de type de doument (DTD) Syntaxes HTML et XHTML Jeux de aratères

Introducing HTML5 Games Discovering new features in HTML5 Offline applications . Discovering new features in CSS3 CSS3 animation . The benefit of creating HTML5 games Breaking the boundary of usual browser games . What others are playing with HTML5 Coca-Cola's Ahh campaign . Asteroid-styled bookmarklet .

Walk-through Business Model Canvas Presentation (review a completed example on slide 44) Use Business Model Canvas template on slide 43 to complete canvas Save completed final canvas slide Upload your completed canvas, via the online portal,

Aug 30, 2021 · Learn to use Canvas e-Learning Services offers live and self-paced options for learning Canvas. Growing with Canvas All LC State faculty are enrolled in Growing with Canvas, which is a self-paced course on how to use Canvas. Growing with Canvas _ has five modules of content that guide users through everything they

HTML5 HTML5 Notes for Professionals Notes for Professionals Free Programming Books Disclaimer This is an uno cial free book created for educational purposes and is not a liated with o cial HTML5 group(s) or company(s). All trademarks and registered trademarks are the property of their respective owners 100 pagesFile Size: 1MB

Module 0 : Adoptez des bases solides HTML5 et CSS3 15 cours en vidéos pour apprendre toutes les bases des langages HTML5 et CSS3 : Chapitre 1. Comment créer une page HTML5 Chapitre 2. La technique pour mettre en forme rapidem

Part I: Building Web Pages and Applications with the Open Web Standard HOUR 1: Improving Mobile Web Application Development with HTML5 1 Understanding How We Got to HTML5 . Part III: HTML5 for Mobile and Web Applications HOUR 18: Web Application APIs and Datasets 309

What is HTML5 Key Points HTML5 is the next major revision of the HTML standard, providing new features that are necessary for modern web applications. It also standardizes many features of the web platform that web developers have been using for years. HTML5 is designed to be cross-platform and backward compatible with existing web browsers. HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a markup language. This tutorial gives very good understanding on HTML5. HTML5 Overview HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.

The time to start using HTML5 is now. HTML5 provides a complete application development framework for writing full featured applications that run in the web browser. Even though the HTML5 specification hasn't been fully completed yet, the most popular features are already widely supported by nearly every modern browser running on devices, from

Mobile SDK HTML5 SDK Developer's Guide Compare an HTML5 architecture to a native application. Notice that in the native application, the Kofax capture experience (with auto-capture) is used on the client and all image processing is also done on the client. The processed image is then sent to the server. In the case of the HTML5 application, the .

His latest book is The Art of Francis Hamabe. Spirits and Vessels, oil on canvas, 18 x 15 inches Dusk, oil on canvas, 20 x 24 inches. The Pink Plate, oil on canvas, 26 x 32 inches prvious page Caterpillar Hill oil on canvas 24 x 48 inches Red, White, and Blue oil on canvas 12 x 10 inches.

the business canvas sections for the workshop. Business Canvas: Your answers to these questions also transfer directly to the corresponding section of your business canvas. Business Canvas The business canvas is a simple framework that contains all the essential building blocks of a business plan. This diagram of eleven boxes can

materials via mobile devices such as the Apple iPad. Accessing Canvas Every Lynn University student has a Canvas account. All courses offered (online, hybrid or on-ground courses) will have a Canvas course shell. Canvas can be accessed by visiting, or

Template & example Make a large printout of the Value Proposition Canvas template (page 5) and use this in a brainstorm with colleagues. Have a look at the Example for AirBnB to learn how the Value Proposition Canvas can be applied in practice. How to use The value proposition canvas

Plastic Canvas.” - - - - - - - - - - - - ADDING PLASTIC CANVAS Cut across your plastic canvas to make strips that are the same height as the inner layer of the basket. Set your basket so that it is completely unfolded. Roll up a strip of canvas and insert it into the bottom of the basket,

THE AMERICAN REVOLUTION AND CONFEDERATION, 1774-1787 87 . Thomas Paine, a recent English imntigrant to the colonies, argued strongly for what until then had been considered a radical idea. Entitled Common Sense, Paine's essay argued in clear and forceful language for the colonies becoming independent states and breaking all political ties with the British monarchy. Paine argued that it was .