HTML5 Canvas基礎(chǔ)教程

內(nèi)容概要

　 《HTML5
Canvas基礎(chǔ)教程》從HTML5和JavaScript(以及jQuery)的基礎(chǔ)知識講起，全面介紹了HTML5
Canvas的各種特性，包括渲染上下文、坐標(biāo)系統(tǒng)、繪制圖形、保存和恢復(fù)畫布狀態(tài)，以及變形、合成、處理圖像和視頻等，讓讀者對Canvas建立起完整的認(rèn)識。隨后討論了動畫循環(huán)、記憶形狀、模擬運(yùn)動、碰撞檢測等基本而又重要的概念，帶領(lǐng)讀者溫習(xí)了必要的數(shù)學(xué)和物理知識。通過帶領(lǐng)讀者動手開發(fā)“太空保齡球”和“躲避小行星”這兩款小游戲，讓讀者掌握開發(fā)游戲的基本流程，學(xué)會響應(yīng)用戶操作、創(chuàng)造虛擬環(huán)境、循環(huán)利用對象、設(shè)計(jì)計(jì)分系統(tǒng)等游戲開發(fā)必備的知識。
　 《HTML5 Canvas基礎(chǔ)教程》適合各層次Web設(shè)計(jì)及開發(fā)人員閱讀。

作者簡介

Rob Hawkes，現(xiàn)任Mozilla技術(shù)布道師，國際知名的HTML5開發(fā)專家，被譽(yù)為“HTML5的化身”（Person of
HTML5），是名噪一時的“Google彈跳球”圖標(biāo)的HTML5
Canvas實(shí)現(xiàn)者。Rob可以說是寫著代碼長大的，他對設(shè)計(jì)交互程序如醉如癡，對HTML5及其他Web新技術(shù)有著濃厚的興趣。他曾在伯恩茅斯大學(xué)（Bournemouth
University）學(xué)習(xí)交互媒體制作（Interactive Media
Production）。大學(xué)未畢業(yè)，就已經(jīng)獲得了Mozilla公司的工作機(jī)會。他經(jīng)?；钴S在HTML5和游戲開發(fā)的各種會議上。
要想了解Rob和他經(jīng)常參加的會議，可以訪問他的網(wǎng)站http://rawkes.com），或者加他的Twitter（@robhawkes）。

書籍目錄

第1章 HTML5簡介　
1.1 HTML簡史　
1.2 為什么需要HTML5　
1.2.1 問題　
1.2.2 解決問題　
1.3 HTML5的新特性　
1.3.1 結(jié)構(gòu)和內(nèi)容元素　
1.3.2 表單　
1.3.3 媒體元素　
1.4 剖析HTML5頁面的結(jié)構(gòu)　
1.5 對HTML5的誤解　
1.5.1 CSS3誤解　
1.5.2 Web Fonts誤解　
1.5.3 Geolocation誤解　
1.5.4 SVG誤解　
1.5.5 Web Storage誤解　
1.5.6 Web Workers誤解　
1.5.7 WebSocket誤解　
1.6 小結(jié)　
第2章 JavaScript基礎(chǔ)　
2.1 JavaScript概述　
2.2 jQuery　
2.2.1 jQuery是什么　
2.2.2 為什么要使用它　
2.2.3 這是在誤導(dǎo)你嗎　
2.2.4 是否不需要理解純JavaScript　
2.2.5 如何使用jQuery　
2.3 在HTML頁面上添加JavaScript　
2.4 在頁面加載之后運(yùn)行JavaScript　
2.4.1 錯誤的方法(window.onload事件)　
2.4.2 冗長的方法(DOM)　
2.4.3 簡單的方法(jQuery方法)　
2.5 變量與數(shù)據(jù)類型　
2.5.1 變量　
2.5.2 數(shù)據(jù)類型　
2.6 條件語句　
2.6.1 if語句　
2.6.2 比較運(yùn)算符　
2.6.3 在if語句中進(jìn)行多重布爾值檢查　
2.6.4 else和else if語句　
2.7 函數(shù)　
2.7.1 創(chuàng)建函數(shù)　
2.7.2 調(diào)用函數(shù)　
2.8 對象　
2.8.1 什么是對象　
2.8.2 創(chuàng)建和使用對象　
2.9 數(shù)組　
2.9.1 創(chuàng)建數(shù)組　
2.9.2 訪問和修改數(shù)組　
2.10 循環(huán)　
2.11 定時器　
2.11.1 設(shè)置一次性定時器　
2.11.2 取消一次性定時器　
2.11.3 設(shè)置重復(fù)定時器　
2.11.4 取消重復(fù)定時器　
2.12 DOM　
2.12.1 HTML網(wǎng)頁示例　
2.12.2 使用純JavaScript訪問DOM　
2.12.3 使用jQuery訪問DOM　
2.12.4 操作DOM　
2.13 小結(jié)　
第3章 Canvas基礎(chǔ)知識　
3.1 認(rèn)識canvas元素　
3.2 2D渲染上下文　
3.2.1 坐標(biāo)系統(tǒng)　
3.2.2 訪問2D渲染上下文　
3.3 繪制基本圖形和線條　
3.3.1 線條　
3.3.2 圓形　
3.4 樣式　
3.5 繪制文本　
3.6 擦除Canvas　
3.7 使Canvas填滿瀏覽器窗口　
3.8 小結(jié)　
第4章 Canvas高級功能　
4.1 保存和恢復(fù)繪圖狀態(tài)　
4.1.1 畫布繪圖狀態(tài)是什么　
4.1.2 保存繪圖狀態(tài)　
4.1.3 恢復(fù)繪圖狀態(tài)　
4.1.4 保存和恢復(fù)多個繪圖狀態(tài)　
4.2 變形　
4.2.1 平移　
4.2.2 縮放　
4.2.3 旋轉(zhuǎn)　
4.2.4 變換矩陣　
4.3 合成　
4.3.1 全局阿爾法值　
4.3.2 合成操作　
4.4 陰影　
4.5 漸變　
4.6 復(fù)雜路徑　
4.7 將畫布導(dǎo)出為圖像　
4.8 小結(jié)　
第5章 處理圖像和視頻　
5.1 加載圖像　
5.2 調(diào)整和裁剪圖像　
5.2.1 調(diào)整圖像大小　
5.2.2 裁剪圖像　
5.2.3 陰影　
5.3 圖像變形　
5.3.1 平移　
5.3.2 旋轉(zhuǎn)　
5.3.3 縮放與翻轉(zhuǎn)　
5.4 訪問像素值　
5.5 從零繪制圖像　
5.5.1 隨機(jī)繪制像素　
5.5.2 創(chuàng)建馬賽克效果　
5.6 基本圖像效果　
5.6.1 反轉(zhuǎn)顏色　
5.6.2 灰度　
5.6.3 像素化　
5.7 視頻處理　
5.7.1 創(chuàng)建HTML5video元素　
5.7.2 使用HTML5video API　
5.7.3 設(shè)置畫布　
5.8 小結(jié)　
第6章 制作動畫　
6.1 畫布中的動畫　
6.2 創(chuàng)建動畫循環(huán)　
6.2.1 循環(huán)　
6.2.2 更新、清除、繪制　
6.3 記憶要繪制的形狀　
6.3.1 錯誤的方法　
6.3.2 正確的方法　
6.3.3 隨機(jī)產(chǎn)生形狀　
6.4 改變方向　
6.5 圓周運(yùn)動　
6.5.1 三角函數(shù)　
6.5.2 綜合運(yùn)用　
6.6 反彈　
6.7 小結(jié)　
第7章 實(shí)現(xiàn)高級動畫　
7.1 物理常識　
7.1.1 什么是物理學(xué)　
7.1.2 物理學(xué)對創(chuàng)建動畫有何作用　
7.1.3 基本概念　
7.1.4 牛頓運(yùn)動定律　
7.2 運(yùn)用物理知識創(chuàng)建動畫　
7.2.1 準(zhǔn)備工作　
7.2.2 速度　
7.2.3 添加邊界　
7.2.4 加速度　
7.2.5 摩擦力　
7.3 碰撞檢測　
7.3.1 碰撞檢測　
7.3.2 彈開物體　
7.3.3 動量守恒　
7.4 小結(jié)　
第8章 太空保齡球游戲　
8.1 游戲概述　
8.2 核心功能　
8.2.1 構(gòu)建HTML代碼　
8.2.2 美化界面　
8.2.3 編寫JavaScript代碼　
8.3 激活用戶界面　
8.4 創(chuàng)建游戲?qū)ο蟆?br />8.4.1 創(chuàng)建平臺　
8.4.2 創(chuàng)建小行星　
8.4.3 創(chuàng)建玩家使用的小行星　
8.4.4 更新UI　
8.5 讓對象運(yùn)動起來　
8.6 檢測用戶交互　
8.6.1 建立事件監(jiān)聽器　
8.6.2 選中玩家使用的小行星　
8.6.3 增加力度　
8.6.4 讓玩家使用的小行星動起來　
8.6.5 可視化用戶輸入　
8.7 重置player　
8.8 玩家獲勝　
8.8.1 更新分?jǐn)?shù)　
8.8.2 從平臺上刪除小行星　
8.9 小結(jié)　
第9章 躲避小行星游戲　
9.1 游戲概述　
9.2 核心功能　
9.2.1 創(chuàng)建HTML 代碼　
9.2.2 美化界面　
9.2.3 編寫JavaScript代碼　
9.3 創(chuàng)建游戲?qū)ο蟆?br />9.3.1 創(chuàng)建小行星　
9.3.2 創(chuàng)建玩家使用的火箭　
9.4 檢測鍵盤輸入　
9.4.1 鍵值　
9.4.2 鍵盤事件　
9.5 讓對象運(yùn)動起來　
9.6 假造橫向卷軸效果　
9.6.1 循環(huán)利用小行星　
9.6.2 添加邊界　
9.6.3 讓玩家保持連續(xù)移動　
9.7 添加聲音　
9.8 結(jié)束游戲　
9.8.1 計(jì)分系統(tǒng)　
9.8.2 殺死玩家　
9.9 增加游戲難度　
9.10 小結(jié)　
第10章 未來的Canvas　
10.1 Canvas與SVG　
10.1.1 可訪問性　
10.1.2 位圖與矢量圖　
10.2 Canvas與Flash　
10.2.1 JavaScript開發(fā)人員可以借鑒Flash　
10.2.2 Canvas沒有像Flash那樣用戶友好的編輯器　
10.3 Canvas與性能　
10.4 Canvas游戲和動畫庫　
10.5 三維圖形　
10.6 與外圍設(shè)備交互　
10.7 用WebSocket技術(shù)構(gòu)建多人游戲　
10.8 靈感　
10.8.1 Sketch Out游戲　
10.8.2 Z-Type游戲　
10.8.3 Sinuous游戲　
10.9 小結(jié)和結(jié)束語　

章節(jié)摘錄

版權(quán)頁：   插圖：   7.1.2物理學(xué)對創(chuàng)建動畫有何作用 理解了物理學(xué)，你就能夠創(chuàng)建更加逼真和具有動態(tài)效果的動畫。也許現(xiàn)在你還無法明顯感受到這一點(diǎn)。無論是使用速度、加速度這些簡單概念，還是構(gòu)建一個包含不同方向作用力的完善系統(tǒng)，通過學(xué)習(xí)物理學(xué)，我們才能真實(shí)而全面地展現(xiàn)動畫效果。物理學(xué)概念不僅是制作逼真動畫的基礎(chǔ)，它們還是在各種動畫（從游戲和數(shù)據(jù)可視化一直到卡通和電影）中經(jīng)過反復(fù)驗(yàn)證的概念。 7.1.3基本概念 學(xué)習(xí)物理的關(guān)鍵是了解一些基本術(shù)語和單位，因?yàn)樵谝恍┹^復(fù)雜的概念中通常要使用它們。雖然你不一定會用到所有術(shù)語，但簡要了解它們有益于日后學(xué)習(xí)。這樣，在后面的代碼中用到這些術(shù)語時，你會更明確它們的意義。 1.力 力是作用于物體的推力或拉力。它會使物體改變速率、方向或形狀。力既有數(shù)量（大小或距離）也有方向，這說明可以把力看作矢量（vector）。力的單位是牛頓（N）。 2.矢量 矢量是具有大小和方向的量（如力）。矢量可以用圖形來表示，通常用一條從原點(diǎn)出發(fā)并指向終點(diǎn)的線段來表示。其中，長度代表矢量的大小，箭頭表示矢量的方向。 3.質(zhì)量 質(zhì)量是一種阻礙物體在力的作用下加速的物理量，也用來衡量慣性。當(dāng)力作用于物體時，質(zhì)量將直接影響加速度的大小。例如，相同的力作用于質(zhì)量不同的兩個物體，則質(zhì)量較大的物體的加速度小于質(zhì)量較小的物體的加速度。質(zhì)量的單位是千克（kg）。 4.重力 物體的質(zhì)量受另一個物體引力的作用而產(chǎn)生的力稱為重力。重力是物體存在重量的原因。重力的計(jì)算方法是：將物體的質(zhì)量乘以地球引力。因此，地球表面的物體比高空中相同的物體要重一些——高空中的地球引力稍微小一些。在地球表面，重力通常使用質(zhì)量的單位（kg），但實(shí)際應(yīng)該使用力的單位：牛頓（N）。 5.摩擦力 摩擦力是一種阻止一個物體沿著另一個物體表面運(yùn)動的力。正是由于摩擦力的存在，相對于地毯之類的物體，冰才顯得更光滑一些。

編輯推薦

《HTML 5 Canvas基礎(chǔ)教程》的行文通俗易懂，既貼近初學(xué)者，也同樣適合專業(yè)人員。那些希望將知識面拓寬到Web和移動設(shè)備上的Flash和Silverlight開發(fā)人員也能從中受益。

圖書封面

圖書標(biāo)簽Tags

無

評論、評分、閱讀與下載

---

    HTML5 Canvas基礎(chǔ)教程 PDF格式下載

---