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

　　不管你用什么平台或者工具，html5革命如果还没有改变你构建网络应用的方式，那么这个改变也将很快会发生。html5包含很多新特性，因此要学的东西也不少。《HTML5 Canvas：网站本地化交互和动画设计（影印版）》将带你从canvas元素开始，它也许是html5最令人激动的功能，让你学习如何使用这个元素来绘画，渲染文本，操作图片以及创作动画，从而构建交互式多媒体应用。无论你现在是在使用flash、 silverlight， 还是只是使用html加上javascript， 你都将很快入门。实际的示例在学习过程中向你展示如何使用canvas来创作各种游戏和娱乐应用程序。 在此过程中你将获得html5的宝贵经验，进而了解为何应用程序开发领袖们都把这个特性称为面向未来的创新性网络开发。创作并修改二维图像、文本和位图，嵌入并操作视频，还有添加音频，构建一个基础框架以便在canvas上创作各种游戏，使用位图和tile表格开发动画游戏图像，走向移动设备：使用phonegap将canvas应用程序移植到iphone，探索使用各种方式将canvas运用于三维和多人游戏应用。

　　Steve和Jeff Fulton， 现任Zynga高级游戏开发工程师，曾任美泰玩具公司的网络开发经理，帮助美泰玩具创建了丰富的在线展示平台。他们还通过8bitrocket.com培养了一大批忠实听众，来了解Flash、Silverlight和现在的HTML5 Canvas的新闻、故事、博客和教程。

preface
1. introduction to html5 canvas
the basic html page
（!doctype html）
（html lang="en"）
（meta charset="utf-8"）
（title）（/title）
a simple html5 page
basic html we will use in this book
（div）
（canvas）
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 code for canvas
adding canvas to the html page
testing to see whether the browser supports 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