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
鄂公網(wǎng)安備 42010302001612號(hào) 