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