|
關(guān)于我們
 書單推薦 新書推薦 |
OReilly：HTML5 Canvas：網(wǎng)站本地化交互和動畫設(shè)計（影印版） 
定 價：98 元
9 7 1 8 2 7 9 5 4 6 3 4 9 
不管你用什么平臺或者工具，html5革命如果還沒有改變你構(gòu)建網(wǎng)絡(luò)應(yīng)用的方式，那么這個改變也將很快會發(fā)生。html5包含很多新特性，因此要學(xué)的東西也不少�！禜TML5 Canvas：網(wǎng)站本地化交互和動畫設(shè)計（影印版）》將帶你從canvas元素開始，它也許是html5最令人激動的功能，讓你學(xué)習(xí)如何使用這個元素來繪畫，渲染文本，操作圖片以及創(chuàng)作動畫，從而構(gòu)建交互式多媒體應(yīng)用。
無論你現(xiàn)在是在使用flash、 silverlight， 還是只是使用html加上javascript， 你都將很快入門。實(shí)際的示例在學(xué)習(xí)過程中向你展示如何使用canvas來創(chuàng)作各種游戲和娛樂應(yīng)用程序。 在此過程中你將獲得html5的寶貴經(jīng)驗(yàn)，進(jìn)而了解為何應(yīng)用程序開發(fā)領(lǐng)袖們都把這個特性稱為面向未來的創(chuàng)新性網(wǎng)絡(luò)開發(fā)。 創(chuàng)作并修改二維圖像、文本和位圖，嵌入并操作視頻，還有添加音頻，構(gòu)建一個基礎(chǔ)框架以便在canvas上創(chuàng)作各種游戲，使用位圖和tile表格開發(fā)動畫游戲圖像，走向移動設(shè)備：使用phonegap將canvas應(yīng)用程序移植到iphone，探索使用各種方式將canvas運(yùn)用于三維和多人游戲應(yīng)用。
Steve和Jeff Fulton， 現(xiàn)任Zynga高級游戲開發(fā)工程師，曾任美泰玩具公司的網(wǎng)絡(luò)開發(fā)經(jīng)理，幫助美泰玩具創(chuàng)建了豐富的在線展示平臺。他們還通過8bitrocket.com培養(yǎng)了一大批忠實(shí)聽眾，來了解Flash、Silverlight和現(xiàn)在的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
HTML5 Canvas offers developers the chance to create animated graphics in ordinary web browsers using common tools: HTML and JavaScript. Canvas is one of the most visible parts of HTML5， fueling demo after demo， game after game. It offers interactivity with great visuals， and provides tremendous freedom to do whatever you want in the browser window. However， it differs enough from typical JavaScript development （as well as Flash and Silverlight development） that it needs careful exploration!
Running the Examples in the Book The best part about programming HTML5 Canvas is that the entry barrier is very low--all you need is a modern web browser and a text editor. As far as compatibility， we suggest you download and/or use t.he latest version of the web browsers as ordered below. 1. Chrome 2. Safari 3. Opera 4. Firefox 5. Internet Explorer （version 9 or higher） Every example in this book was tested with Google Chrome， Safari， and Opera. Late in the development of the example code， Firefox started causing issues. While we made every attempt to ensure these examples worked across as many browsers as possible，we recommend you use Google Chrome or Safari for the best results until Canvas support improves. Please note that if you are using the .pdf version of this book to cut and paste the code， there may be instances where minus （"-"） signs are representedby another character， such as a hyphen. You may need to replace the other character with a minus sign （"-"） to get the code to work properly. We suggest that if you have purchased the electronic version of this book， you should use the printed code samples as a guide only， and instead download the code from the book distribution. With that code， you will also get all the images， libraries， and assets necessary to make all the examples work in a web browser. What You Need to Know Ideally， you know your way around programming in some kind of modern language，such as C， C++， C#， ActionScript 2， ActionScript 3， Java， or JavaScript. However， if you're new to this space， we will introduce Canvas in a way that should familiarize you with web programming at the same time. Web developers with a foundation in HTML and JavaScript should easily be able to pick up this book and run with it. If you are a Flash developer， JavaScript and ActionScriPt 1 are essentially the same language. While Adobe took some liberties with ActionScript 2， you should be very comfortable with JavaScript. If you only have experience with ActionScript 3， Java-Script might feel like a step backward. If you are a Silverlight or C# developer， take a deep breath and think about a time before ASP.NET/C# when you might have had to develop web apps in VBScript. You are about to enter a similar space. How This Book Is Organized This book is organized into 11 chapters. The first four chapters walk you through the HTML Canvas APl by example. The topics covered include text， images， and drawing.These chapters contain a few finished apps， but mainly consist of demos designed tom show you the facets of the Canvas APl. The following six chapters build upon the Canvas APl by expanding the scope of the examples to application length. In these chapters， we discuss math and physics applications， video， audio， games， and mobile.The final chapter introduces a couple experimental areas: 3D and multiplayer.
你還可能感興趣
我要評論
|
