HTML5 Canvas—网站本地化交互和动画设计（影印版）

.retrieving the 2d context
the drawscreen0 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 initgame0 function
the eventkeypressed0 function
the drawscreen0 function
exporting canvas to an image
the final game code
what's next
2. drawing on the canvas
the basic file setup for this chapter
the basic rectangle shape
the canvas state
what's not part of the state?
how do 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
filling objects with colors and gradients
setting basic fill colors
filling shapes with gradients
filling shapes with patterns
creating shadows on canvas shapes
what's next
3. the html5 canvas text apl
displaying basic text
basic text display
handling basic text in text arranger
communicating between html forms and the canvas
using measuretext
filltext and stroketext
setting the text font
font size, face weight, and style basics
handling font size and face in text arranger
font color
font baseline and alignment
text arranger version 2.0
text and the canvas context
global alpha and text
global shadows and text
text with gradients and patterns
linear gradients and text
radial gradients and text
image patterns and text
handling gradients and patterns in text arranger
width, height, scale, and todataurl0 revisited
dynamically resizing the canvas
dynamically scaling the canvas
the todataurl0 method of the canvas object
final version of text arranger
what's next
4. images on the canvas
the basic file setup for this chapter
image basics
preloading images
displaying an image on the canvas with drawlmage0
resizing an image painted to the canvas
copying part of an image to the canvas
simple cell-based sprite animation
creating an animation frame counter
creating a timer loop
changing the tile to display
advanced cell-based animation
examining the tile sheet
creating an animation array
choosing the tile to display
looping through the tiles
drawing the tile
moving the image across the canvas
applying rotation transformations to an image
canvas transformation basics
animating a transformed image
creating a grid of tiles
defining a tile map
creating a tile map with tiled
displaying the map on the canvas
zooming and panning an image
creating a window for the image
drawing the image window
panning the image
zoom and pan the image
application: controlled pan and zoom
pixel manipulation
the canvas pixel manipulation apl
application tile stamper
copying from one canvas to another
what's next
5. math, physics, and animation
moving in a straight line
moving between two points: the distance of a line
moving on a vector
bouncing off walls
bouncing a single ball
multiple balls bouncing off walls
multiple balls bouncing with a dynamically resized canvas
multiple balls bouncing and colliding
multiple balls bouncing with friction
curve and circular movement
uniform circular motion
moving in a simple spiral
cubic bezier curve movement
moving an image
creating a cubic bezier curve loop
simple gravity, elasticity, and friction
simple gravity
simple gravity with a bounce
gravity with bounce and applied simple elasticity
simple gravity, simple elasticity, and simple friction
easing
easing out (landing the ship)
easing in (taking off)
what's next?
6. mixing html$ video and canvas
html5 video support
theora + vorbis =ogg
h.264 + $$$ =mp4
vp8 + vorbis =webm
combining all three
converting video formats
basic html5 video implementation
plain-vanilla video embed
video with controls, loop, and autoplay
altering the width and height of the video
?reloading video in javascript
a problem with events and embedded video in htmi.5
video and the canvas
displaying a video on html5 canvas
html5 video properties
video on the canvas examples
using the currenttime property to create video events
canvas video transformations: rotation
canvas video puzzle
creating video controls on the canvas
animation revisited: moving videos
what's next?
7. working with audio
the basic （audio） tag
audio formats
supported formats
audacity
example: using all three formats
audio tag properties, functions, and events
audio functions
important audio properties
important audio events
loading and playing the audio
displaying attributes on the canvas
playing a sound with no audio tag
dynamically creating an audio element in javascript
finding the supported audio format
playing the sound
look ma, no tag!
creating a canvas audio player
creating custom user controls on the canvas
loading the button assets
setting up the audio player values
mouse events
sliding play indicator
play/pause push button: hit test point revisited
loop/no loop toggle button
click-and-drag volume slider
case study in audio: space raiders game
why sounds in apps are different: event sounds
iterations
space raiders game structure
iteration it 1: playing sounds using a single object
iteration it2: creating unlimited dynamic sound objects
iteration it3: creating a sound pool
iteration it4: reusing preloaded sounds
what's next
8. canvas game essentials
why games in htmls?
canvas compared to flash
what does canvas offer?
our basic game html5 file
our game's design
game graphics: drawing with paths
needed assets
using paths to draw the game's main character
animating on the canvas
game timer loop
the player ship state changes
applying transformations to game graphics
the canvas stack
game graphic transformations
rotating the player ship from the center
alpha fading the player ship
game object physics and animation
how our player ship will move
controlling the player ship with the keyboard
giving the player ship a maximum velocity
a basic game framework
the game state machine
the update/render (repeat) cycle
the frameratecounter object prototype
putting it all together
geo blaster game structure
geo blaster global game variables
the player object
geo blaster game algorithms
arrays of logical display objects
level:knobs
level and game end
awarding the player extra ships
applying collision detection
the geo blaster basic full source
rock object prototype
what's next
9. combining bitmaps and sound
geo blaster extended
geo blaster tile sheet
rendering the other game objects
adding sound
pooling object instances
adding in a step timer
geo blaster extended full source
creating a dynamic tile sheet at runtime
a simple tile-based game
micro tank maze description
the tile sheet for our game
the playfield
the player
the enemy
the goal
the explosions
turn-based game flow and the state machine
simple tile movement logic overview
rendering logic overview
simple homegrown al overview
micro tank maze complete game code
what's next
10. mobilizing gameswith phonegap
going mobile!
introducing phonegap
the application
the code
examining the code for bsbingo.html
the application code
creating the ios application with phonegap
installing xcode
installing phonegap
creating the bs bingo phonegap project in xcode
testing the new blank application in the simulator
integrating bs bingo into the project
setting the orientation
changing the banner and icon
testing on the simulator
adding in an iphone "gesture"
adding the gesture functions to index.html
testing on a device
using xcode to target a test device
beyond the canvas
what's next
11. further explorations
3d with webgl
what is webgl?
how do i test webgl?
how do i learn more about webgl?
what does a webgl application look like?
full code listing
further explorations with webgl
webgl javascript libraries
multiplayer applications with electroserver 5
installing electroserver
the basic architecture of a socket-server application
the basic architecture of an electroserver application
creating a chat application with electroserver
testing the application in google chrome
further explorations with electroserver
this is just the tip of the iceberg
conclusion
index

.　　What you won't get in this book is a simple rundown and retelling of the published W3C Canvas APl. While we cover portions of the APl in detail, some of it is not applicable to games. Furthermore, you can just read the documentation here: http://dev.w3.org/html5/2dcontext
　　Our goal is to feature the ways Canvas can be used to create animation, games, and entertainment applications for the Web.
　　Conventions Used in This Book
　　The following typographical conventions are used in this book:
　　Plain text
　　Indicates menu tit]es, menu options, menu buttons, and keyboard accelerators (such as Alt and Ctrl).
　　Italic
　　Indicates new terms, URLs, email addresses, filenames, file extensions, pathnames, directories, and Unix utilities.
　　Constant width
　　Indicates commands, options, switches, variables, attributes, keys, functions, types, classes, namespaces, methods, modules, properties, parameters, values, ob jects, events, event handlers, XML tags, HTML tags, macros, the contents of files, or the output from commands.
　　Constant width bold
　　Shows commands or other text that should be typed literally by the user.Constant width italic
　　Shows text that should be replaced with user-supplied values.This icon signifies a tip, suggestion, or general note.This icon indicates a warning or caution.
　　Using Code Examples
　　This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example,writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product's documentation does require permission.
　　We appreciate, but do not require, attribution. An attribution usually includes the title,author, publisher, and ISBN. For example: "HTML5 Canvas by Steve Fulton and Jeff Fulton (O'Reilly). Copyright 2011 8bitrocket Studios, 978-1-4493-9390-8."
　　If you feel your use of code examples falls outside fair use or the permission given above,feel free to contact us at permissions@oreilly, com.
　　We'd Like to Hear from You
　　Please address comments and questions concerning this book to the publisher:
　　O'Reilly Media, Inc.
　　1005 Gravenstein Highway North
　　Sebastopol, CA 95472
　　(800) 998-9938 (in the United States or Canada)
　　(707) 829-0515 (international or local)
　　(707) 829-0104 (fax)
　　We have a web page for this book, where we list errata, examples, and any additional
　　information. You can access this page at:
　　http ://www. or eilly, com/ca talog/9 7 8144 9 3 9 3 908
　　To comment or ask technical questions about this book, send email to: bookquestions@oreilly, com
　　For more information about our books, courses, conferences, and news, see our website at http://www, oreilly.com.
　　Find us on Facebook: http://facebook, com/oreilly Follow us on Twitter: http://twitter, com/oreillymedia Watch us on YouTube: http://www.youtube, com/oreillymedia
　　Safari~ Books Online
　　Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.
　　With a subscription, you can read any page and watch any video from our library online.Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.
　　O'Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O'Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.
　　Acknowledgments
　　First, Steve would like to thank his beautiful wife, Dawn, for the amazing patience,guidance, and support she lovingly provided before, during, and after this book was written. Steve would also like to thank his girls--Rachel, Daphnie, and Katie--for all their enthusiastic support and for not getting too frustrated every time they asked him to play and Daddy said, "Sure, yeah, in just a couple minutes" because his head was buried in these pages. He'd also like to thank his mom and dad, plus his sisters, Mari and Carol for everything they taught us; and his uncle Richard and cousin John for all their love and support. Also thanks to Sue, Morgan, and Lauren Miller; Jen, Eric, Sarah,and Paige Garnica; Dietrich; Chantal Martin; and Ryan and Justin Fulton.
　　Jeff would like to thank his amazing wife, Jeanne, and his two wonderful boys, Ryan and Justin, for putting up with him writing this second book in two years. The writing process is a time- and energy-consuming endeavor that demands patience and understanding from those in close proximity to the temperamental author. Jeff would also like to thank his mom and dad, as well as sisters Mari and Carol, for the morale and babysitting support that was needed during the crucial writing times. Also, special thanks to the Perry and Backlar clans for all of their love and support.
　　The authors would also like to acknowledge all the fine people at O'Reilly, especially Mike Loukides, who took the chance on us for this book; and Simon St. Laurent, who led us out of the wilderness; our copyeditor, Marlowe Shaeffer, who made the text sparkle in her own special way; and our production editor, Kristen Borg, for finishing the job.
　　We'd also like to thank our technical reviewers, Raffaele Cecco, Shelley Powers, and Andres Pagella.
　　Thanks to everyone at Electrotank, especially Jobe Makar, Matthew Weisner, and Teresa Carrigan; as well as our friends at Jett Morgan, Creative Bottle, Producto Studios, Mattel, Mochi, Adobe, Microsoft, Zynga, The SPIL Group, Giles Thomas from Learningwebgl.com, Ari Feldman, and Terry Paton, plus Ace The Super Villain, Bas Alicante, egdcltd, Tony Fernando, SeuJogo, Hayes, Jose Garay, Richard Davey (@PhotonStorm), Squize and nGfx (@GamingYourWay), and all our other friends at 8bitrocket.com. We would also like to give a huge shout out to the simply outstanding team at 444 Deharo, especially the entire FV team and the Foo Fighters pod!Finally, we'd like to thank all of our friends who helped along the way, including lan Legler, Brandon Crist, Eric Barth, Wesley Crews, Kenny Brown, Mike Foti, Evan Pershing, Scott Johnson, Scott Lunceford, Kurt Legler, Ryan Legler, John Little, Matt Hyatt, Varun Tandon, Mark Hall, Jason Neifeld, Mike Peters and The Alarm....and, last but not least, thanks to the W3C for coming up with such a kickass spec for HTML5 Canvas.