《HTML5Canvas開發(fā)詳解》([美]Steve Fulton Jeff Fulton 著)【圖片簡介評

發(fā)布時間：2016-09-22 15:10

本文關(guān)鍵詞：HTML5canvas開發(fā)詳解，由筆耕文化傳播整理發(fā)布。

美食圖書

HTML5canvas開發(fā)詳解 特色及評論

詳細(xì)講解canvas，輕松掌握html5新特性。html5 canvas開發(fā)詳解或者是html5中*令人興奮的新特性。通過html5 canvas開發(fā)詳解，讀者將學(xué)會如何使用canvas進行繪圖、渲染文字、處理圖像、創(chuàng)建動畫，*終構(gòu)建出交互式的多媒體應(yīng)用程序。

HTML5canvas開發(fā)詳解 內(nèi)容簡介

　　html5是web應(yīng)用程序開發(fā)的新趨勢，canvas是其*令人興奮的新特性。《html5 canvas開發(fā)詳解》通過對canvas元素進行詳細(xì)介紹，引領(lǐng)讀者進入html5開發(fā)的大門。通過《html5 canvas開發(fā)詳解》，讀者將學(xué)到如何使用canvas進行繪圖、渲染文字、處理圖像、創(chuàng)建動畫，*終構(gòu)建出交互式的多媒體應(yīng)用程序。　　《html5 canvas開發(fā)詳解》適合各個層級的web應(yīng)用開發(fā)人員閱讀使用。不論他現(xiàn)在是使用flash、silverlight的成熟開發(fā)人員，還僅僅是只用過html及javascript的初學(xué)者。

HTML5canvas開發(fā)詳解 本書目錄

目　錄

第1章　html5 canvas簡介　1
1.1　基礎(chǔ)的html頁面　2
1.1.1　　2
1.1.2　　3
1.1.3　　3
1.1.4　…　3
1.1.5　實現(xiàn)簡單的html頁面　3
1.2　本書中使用的基礎(chǔ)html頁面　4
1.2.1　　4
1.2.2　　5
1.3　文檔對象模型(dom)和canvas　5
1.4　javascript和canvas　5
1.4.1　javascript框架和庫　5
1.4.2　javascript放置的位置及其理由　6
1.5　html5 canvas版“hello world！”　6
1.5.1　為canvas封裝javascript代碼　7
1.5.2　將canvas添加到html頁面中　8
1.5.3　檢測瀏覽器是否支持canvas　9
1.5.4　獲得2d上下文　10
1.5.5　drawscreen()函數(shù)　10
1.6　用console.log調(diào)試　13
1.7　2d上下文及其當(dāng)前狀態(tài)　14
1.8　html5 canvas對象　15
1.9　第二個示例：猜字母　15
1.9.1　游戲如何工作　16
1.9.2　“猜字母”游戲的變量　16
1.9.3　initgame()函數(shù)　17
1.9.4　eventkeypressed()函數(shù)　17
1.9.5　drawscreen()函數(shù)　19
1.9.6　導(dǎo)出canvas到圖像　20
1.9.7　*終的游戲代碼　21
1.10　內(nèi)容預(yù)告　24

第2章　在canvas上繪圖　25
2.1　本章基本文件設(shè)置　25
2.2　基本矩形　26
2.3　canvas狀態(tài)　27
2.3.1　什么不屬于狀態(tài)　28
2.3.2　如何保存和恢復(fù)canvas狀態(tài)　28
2.4　使用路徑創(chuàng)建線段　28
2.4.1　設(shè)置路徑的開始和結(jié)束　28
2.4.2　動態(tài)繪圖　28
2.4.3　高級線段繪制舉例　30
2.5　高級路徑方法　31
2.5.1　弧線　31
2.5.2　貝塞爾曲線　33
2.5.3　canvas裁切區(qū)域　34
2.6　在畫布上合成　36
2.7　簡單畫布變換　38
2.7.1　旋轉(zhuǎn)和平移變換　38
2.7.2　縮放變換　43
2.7.3　縮放和旋轉(zhuǎn)組合變換　44
2.8　用顏色和漸變填充對象　46
2.8.1　基本填充顏色設(shè)置　46
2.8.2　填充漸變形狀　47
2.9　用圖案填充形狀　56
2.10　創(chuàng)建陰影　59
2.11　內(nèi)容預(yù)告　60

第3章　html5 canvas的文本api　61
3.1　顯示基本文本　61
3.1.1　基本文本顯示　61
3.1.2　在text arranger中處理基本文本　62
3.1.3　html表單和畫布之間的通信　62
3.1.4　使用measuretext　63
3.1.5　filltext和stroketext　64
3.2　設(shè)置文本字體　70
3.2.1　字體大小、磅重和樣式基礎(chǔ)　70
3.2.2　在文本編輯器中處理字體大小和外觀　70
3.2.3　字體顏色　74
3.2.4　字體基線和對齊　76
3.2.5　text arranger 2.0版　80
3.3　文本和canvas上下文　84
3.3.1　全局alpha和文本　84
3.3.2　全局陰影和文本　86
3.4　文本漸變和圖案　89
3.4.1　文本線性漸變　89
3.4.2　文本徑向漸變　90
3.4.3　文本圖像圖案　90
3.4.4　在text arranger中處理漸變和圖案　92
3.5　寬度、高度、縮放和todataurl()回顧　94
3.5.1　動態(tài)調(diào)整畫布尺寸　94
3.5.2　動態(tài)縮放畫布　97
3.5.3　canvas對象的todataurl()方法　98
3.6　*終版的text arranger　99
3.7　內(nèi)容預(yù)告　110

第4章　canvas圖像　111
4.1　本章的基本文件設(shè)置　111
4.2　圖像基礎(chǔ)　112
4.2.1　預(yù)下載圖像　113
4.2.2　使用drawimage()函數(shù)在畫布上顯示圖像　113
4.2.3　調(diào)整畫布上圖像的大小　115
4.2.4　將部分圖像復(fù)制到畫布　116
4.3　簡單的幀式動畫　117
4.3.1　創(chuàng)建動畫幀計數(shù)器　117
4.3.2　創(chuàng)建一個計時循環(huán)　118
4.3.3　改變拼板顯示　118
4.4　高級幀式動畫　119
4.4.1　檢查拼圖　120
4.4.2　創(chuàng)建動畫數(shù)組　120
4.4.3　選擇拼板顯示　120
4.4.4　在拼板中循環(huán)　121
4.4.5　繪制拼板　121
4.4.6　在整個畫布上移動圖像　122
4.5　在圖像上應(yīng)用旋轉(zhuǎn)變換　123
4.5.1　畫布變換基礎(chǔ)　124
4.5.2　為變換的圖像設(shè)置動畫　126
4.6　創(chuàng)建一個拼板網(wǎng)格　128
4.6.1　定義拼板地圖　129
4.6.2　用tiled創(chuàng)建拼板地圖　129
4.6.3　在畫布上顯示地圖　131
4.7　縮放和平移圖像　134
4.7.1　為圖像創(chuàng)建一個窗口　135
4.7.2　繪制圖像窗口　135
4.7.3　平移圖像　136
4.7.4　縮放和平移圖像　138
4.7.5　應(yīng)用程序：控制平移和縮放　139
4.8　像素操作　143
4.8.1　操作畫布像素的api　143
4.8.2　應(yīng)用程序拼板印章　144
4.9　畫布間的復(fù)制　150
4.10　內(nèi)容預(yù)告　153

第5章　數(shù)學(xué)、物理與動畫　154
5.1　直線移動　154
5.1.1　兩點間移動：線段距離　156
5.1.2　在矢量上移動　161
5.2　撞墻反彈　164
5.2.1　單個球反彈　165
5.2.2　多球撞墻反彈　168
5.2.3　可動態(tài)調(diào)整畫布大小的多球碰撞反彈　173
5.2.4　多球反彈和碰撞　178
5.2.5　有摩擦力的多球碰撞反彈　190
5.3　曲線和圓弧運動　195
5.3.1　勻速圓周運動　195
5.3.2　簡單螺旋運動　198
5.3.3　立方貝賽爾曲線運動　200
5.3.4　移動圖像　205
5.3.5　創(chuàng)建立方貝塞爾曲線環(huán)　209
5.4　簡單重力、彈力及摩擦力　213
5.4.1　簡單的重力　213
5.4.2　帶反彈的簡單重力　216
5.4.3　重力反彈及應(yīng)用簡單彈力　219
5.4.4　簡單重力、彈力及摩擦力的綜合　222
5.5　緩沖　224
5.5.1　緩沖結(jié)束(飛船著陸)　224
5.5.2　緩沖開始(起飛)　228
5.6　內(nèi)容預(yù)告　231

第6章　在畫布中融合html5視頻　232
6.1　html5中對視頻的支持　232
6.1.1　theora + vorbis = .ogg　232
6.1.2　h.264 + $$$ = .mp4　233
6.1.3　vp8 + vorbis = .webm　233
6.1.4　結(jié)合3種視頻格式　234
6.2　轉(zhuǎn)換視頻格式　234
6.3　html5視頻的基本實現(xiàn)方法　234
6.3.1　普通的視頻嵌入方法　235
6.3.2　添加視頻控制器并設(shè)置播放方式　237
6.3.3　調(diào)整視頻的寬度和高度　238
6.4　使用javascript預(yù)加載視頻　242
6.5　視頻與畫布　246
6.5.1　在html5 canvas上顯示視頻　246
6.5.2　html5的視頻屬性　251
6.6　在畫布上使用視頻的示例　255
6.6.1　使用currenttime屬性創(chuàng)建視頻事件　255
6.6.2　在畫布上旋轉(zhuǎn)視頻　259
6.6.3　在畫布上制作視頻拼圖　264
6.6.4　在畫布上創(chuàng)建視頻控制器　276
6.7　回顧動畫效果之移動視頻　284
6.8　內(nèi)容預(yù)告　288

第7章　使用音頻　289
7.1　標(biāo)簽　289
7.2　音頻格式　290
7.2.1　支持的音頻格式　290
7.2.2　音頻轉(zhuǎn)換工具audacity　290
7.2.3　示例：使用所有3種音頻格式　291
7.3　audio標(biāo)簽的屬性、函數(shù)和事件　292
7.3.1　音頻函數(shù)　292
7.3.2　重要的音頻屬性　293
7.3.3　重要的音頻事件　293
7.3.4　加載并播放音頻　294
7.3.5　在畫布上顯示屬性信息　294
7.4　不使用audio標(biāo)簽播放聲音　298
7.4.1　使用javascript動態(tài)創(chuàng)建audio元素　298
7.4.2　查找支持的音頻格式　299
7.4.3　播放聲音　300
7.4.4　不使用標(biāo)簽　301
7.5　創(chuàng)建畫布音頻播放器　303
7.5.1　在canvas中創(chuàng)建自定義用戶控件　304
7.5.2　加載按鈕資源　305
7.5.3　設(shè)置音頻播放器的值　306
7.5.4　鼠標(biāo)事件　307
7.5.5　滑動播放指示器　307
7.5.6　播放/暫停按鈕：檢測單擊并獲取位置　308
7.5.7　循環(huán)/不循環(huán)切換按鈕　310
7.5.8　單擊并拖動音量滑塊　311
7.6　音頻案例：太空掠奪者游戲　319
7.6.1　應(yīng)用程序中不同的聲音——事件聲音　319
7.6.2　迭代　319
7.6.3　太空掠奪者游戲框架　320
7.6.4　第1次迭代：使用單個對象播放聲音　328
7.6.5　第2次迭代：創(chuàng)建無限個動態(tài)聲音對象　328
7.6.6　第3次迭代：創(chuàng)建一個聲音池　330
7.6.7　第4次迭代：重用預(yù)加載的聲音　332
7.7　內(nèi)容預(yù)告　343

第8章　畫布游戲本質(zhì)　344
8.1　為什么用html5開發(fā)游戲　344
8.1.1　canvas與flash比較　344
8.1.2　canvas提供的新特性　345
8.2　游戲的基本html5文件　345
8.3　游戲的設(shè)計　346
8.4　游戲圖形：使用路徑繪制　347
8.4.1　所需的資源　347
8.4.2　使用路徑繪制游戲的主角　347
8.5　canvas上的動畫　350
8.5.1　游戲定時器循環(huán)　350
8.5.2　玩家飛船的狀態(tài)變化　351
8.6　對游戲圖形應(yīng)用形狀變換　353
8.7　游戲圖形變換　355
8.7.1　使玩家飛船繞中心旋轉(zhuǎn)　355
8.7.2　使用alpha通道實現(xiàn)飛船淡入　357
8.8　游戲物體的物理算法和動畫　358
8.8.1　移動玩家飛船　359
8.8.2　使用鍵盤控制玩家飛船　360
8.8.3　設(shè)置玩家飛船的*大速度　365
8.9　基本游戲框架　365
8.9.1　游戲狀態(tài)機　365
8.9.2　更新/渲染的重復(fù)周期　369
8.9.3　幀率計數(shù)器對象原型　371
8.10　整合所有元素　373
8.10.1　geo blaster游戲架構(gòu)　373
8.10.2　geo blaster全局游戲變量　376
8.11　玩家對象　377
8.12　geo blaster游戲的算法　377
8.12.1　邏輯顯示對象數(shù)組　378
8.12.2　級別難度控制　380
8.12.3　關(guān)卡和游戲結(jié)束　380
8.12.4　獎勵玩家另外的飛船　381
8.12.5　應(yīng)用碰撞檢測　382
8.13　geo blaster basic的完整源代碼　384
8.14　隕石對象原型　410
8.15　內(nèi)容預(yù)告　412

第9章　位圖與聲音的結(jié)合　413
9.1　擴展版的geo blaster　413
9.1.1　 geo blaster的圖片表　414
9.1.2　渲染其他游戲?qū)ο蟆?19
9.1.3　添加聲音　424
9.1.4　用對象池管理對象實例　428
9.1.5　添加步長定時器　430
9.1.6　geo blaster擴展版的完整源代碼　432
9.2　在運行時創(chuàng)建動態(tài)的圖片表　464
9.3　簡單的基于區(qū)塊的游戲　468
9.3.1　微型坦克迷宮的介紹　469
9.3.2　游戲中用到的圖片表　470
9.3.3　游戲區(qū)域　471
9.3.4　玩家　472
9.3.5　敵人　473
9.3.6　目標(biāo)　474
9.3.7　爆炸效果　474
9.3.8　回合制游戲的流程和狀態(tài)機　474
9.3.9　簡單區(qū)塊移動邏輯概述　478
9.3.10　渲染邏輯概述　480
9.3.11　自定義簡單人工智能概述　481
9.3.12　微型坦克迷宮的完整游戲代碼　482
9.4　內(nèi)容預(yù)告　501

第10章　使用phonegap制作移動設(shè)備游戲　502
10.1　進軍移動設(shè)備　502
10.1.1　phonegap簡介　503
10.1.2　應(yīng)用程序　503
10.1.3　代碼　504
10.1.4　查看bsbingo.html的代碼　508
10.1.5　應(yīng)用程序代碼　511
10.2　使用phonegap創(chuàng)建ios應(yīng)用程序　512
10.2.1　安裝xcode　512
10.2.2　安裝phonegap　513
10.2.3　在xcode中創(chuàng)建bs bingo的phongap工程　515
10.2.4　在模擬器中測試新的空白應(yīng)用程序　517
10.2.5　在工程中整合bs bingo　519
10.2.6　設(shè)置應(yīng)用的方向　521
10.2.7　改變啟動圖和圖表　522
10.2.8　在模擬器上測試　524
10.2.9　添加iphone手勢　526
10.2.10　在index.htm頁面中添加手勢函數(shù)　527
10.2.11　在設(shè)備上測試　528
10.2.12　使用xcode指定一個測試設(shè)備　529
10.3　超越canvas　530
10.4　內(nèi)容預(yù)告　531

第11章　進一步探索　532
11.1　使用webgl實現(xiàn)3d效果　532
11.1.1　webgl是什么　533
11.1.2　測試webgl　533
11.1.3　學(xué)習(xí)更多webgl的知識　534
11.1.4　webgl應(yīng)用示例　534
11.1.5　完整的源代碼列表　539
11.1.6　進一步探索webgl　546
11.1.7　webgl的javascript類庫　546
11.2　使用electroserver 5實現(xiàn)多人應(yīng)用程序　547
11.2.1　安裝electroserver　548
11.2.2　套接字服務(wù)器程序的基礎(chǔ)架構(gòu)　550
11.2.3　electroserver程序的基礎(chǔ)架構(gòu)　551
11.2.4　使用electroserver創(chuàng)建聊天程序　552
11.2.5　在google chrome中測試應(yīng)用程序　558
11.2.6　進一步探索electroserver　562
11.2.7　這只是冰山一角　571
11.3　總結(jié)　571

HTML5canvas開發(fā)詳解 文章節(jié)選

詳細(xì)講解Canvas,輕松掌握HTML5新特性。HTML5 Canvas開發(fā)詳解或者是HTML5中*令人興奮的新特性。通過HTML5 Canvas開發(fā)詳解,讀者將學(xué)會如何使用Canvas進行繪圖、渲染文字、處理圖像、創(chuàng)建動畫,*終構(gòu)建出交互式的多媒體應(yīng)用程序。

HTML5canvas開發(fā)詳解 相關(guān)資料

“這是一本不可多得的好書，書中對canvas這個可以說是html5中*令人興奮的標(biāo)簽進行了非常詳盡的闡述。書中大量的實例不僅令人深受啟發(fā)，而且對視頻、音頻等hmtl5附帶的特性進行了詳盡的描述，這一點令人非常驚喜�！�
——rafaele cecco
長期從事視頻游戲開發(fā)，，作品包括cybernoid、exolon和stormlord

HTML5canvas開發(fā)詳解 作者介紹

Steve Fulton 是一位RIA和網(wǎng)頁游戲開發(fā)者，在過去的3年半中，他在他的網(wǎng)站上培養(yǎng)了很多關(guān)于他的新聞，故事，博客，關(guān)于Flash，Silverlight教程，以及現(xiàn)在的HTML5.Canvas的讀者。在Flash游戲開發(fā)者中，Steve在Alexa網(wǎng)站的排名中名列前茅。Steve在過去的十四年中擔(dān)任Mattel Toys公司的網(wǎng)頁開發(fā)經(jīng)理，幫助公司創(chuàng)建了廣泛的的在線用戶。 Jeff Fulton 在過去的17年中一直致力于RIA（豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)）并且只做了很多游戲。他目前是Zynga的高級游戲工程師。之前他在Mattel Toys做貿(mào)易，并且為自己的8bitrocket工作室做自由撰稿人。Jeff還與他的哥哥Steve合著了一本關(guān)于高級Flash游戲開發(fā)的書。現(xiàn)在他經(jīng)營者一個成功且很受歡迎的博客網(wǎng)站--。這是一個致力于Flash，HTML5，Silverlight和復(fù)古游戲的網(wǎng)站。

HTML5canvas開發(fā)詳解

淘書團

“林語堂文集”7冊，集合現(xiàn)代著名作家、翻譯家林語堂的國學(xué)論著《孔子的智慧》，紅學(xué)...

團購：林語堂文集7冊