本文關(guān)鍵詞：HTML5+JavaScript動(dòng)畫基礎(chǔ)，由筆耕文化傳播整理發(fā)布。

作者簡(jiǎn)介

徐寧，軟件架構(gòu)師，從2001年開始接觸.NET開發(fā)，于2007年7月獲得C#方向的微軟MVP�，F(xiàn)任職于道富銀行技術(shù)中心，從事金融軟件架構(gòu)設(shè)計(jì)的工作。在博客園（idior.cnblogs.com）曾發(fā)表多篇技術(shù)文章并參與過多本技術(shù)書籍的翻譯，現(xiàn)關(guān)注于.NET企業(yè)應(yīng)用與敏捷開發(fā)。你可以通過xuning.net@gmail.com與他聯(lián)系。李強(qiáng)，軟件工程師，2008年畢業(yè)于西北大學(xué)軟件學(xué)院，現(xiàn)就職于道富銀行技術(shù)中心。開發(fā)了多個(gè)大型金融項(xiàng)目。愛好技術(shù)，喜歡折騰，在WCF，WPF，ASP.NET MVC等多個(gè)領(lǐng)域都有較深入研究。你可以通過Email/MSN: Sparkli@hotmail.com與他聯(lián)系。

書籍目錄

目　錄 第一部分 JavaScript動(dòng)畫基礎(chǔ)第1章　動(dòng)畫的基本概念　21.1　動(dòng)畫　31.2　幀與運(yùn)動(dòng)　31.2.1　記錄幀　41.2.2　程序幀　51.3　動(dòng)態(tài)動(dòng)畫與靜態(tài)動(dòng)畫　51.4　小結(jié)　6第2章　動(dòng)畫的JavaScript基礎(chǔ)　72.1　動(dòng)畫基礎(chǔ)　72.2　HTML5簡(jiǎn)介　82.2.1　對(duì)canvas的支持　82.2.2　性能　92.2.3　HTML5基本文檔　92.2.4　CSS樣式表　112.2.5　額外的腳本　122.2.6　調(diào)試　122.3　用代碼實(shí)現(xiàn)動(dòng)畫　132.3.1　動(dòng)畫循環(huán)　132.3.2　使用requestAnimationFrame的動(dòng)畫循環(huán)　162.4　JavaScript對(duì)象　172.4.1　基礎(chǔ)對(duì)象　182.4.2　創(chuàng)建一類新對(duì)象　182.4.3　原型　192.4.4　函數(shù)風(fēng)格　192.5　用戶交互　202.5.1　事件與事件處理程序　202.5.2　監(jiān)聽器與事件處理程序　202.5.3　鼠標(biāo)事件　222.5.4　鼠標(biāo)位置　242.5.5　觸摸事件　252.5.6　觸摸位置　262.5.7　鍵盤事件　272.5.8　鍵盤碼　282.6　小結(jié)　30第3章　動(dòng)畫中的三角學(xué)　313.1　三角學(xué)　323.2　角　323.2.1　弧度和角度　323.2.2　canvas坐標(biāo)系　333.2.3　三角形的邊　353.2.4　三角函數(shù)　353.3　旋轉(zhuǎn)　393.4　波　423.4.1　平滑的上下運(yùn)動(dòng)　433.4.2　線性垂直運(yùn)動(dòng)　453.4.3　脈沖運(yùn)動(dòng)　463.4.4　使用兩個(gè)角的產(chǎn)生波　473.4.5　使用繪圖API產(chǎn)生的波　483.5　圓與橢圓　493.5.1　圓周運(yùn)動(dòng)　493.5.2　橢圓運(yùn)動(dòng)　513.6　勾股定律　523.6.1　兩點(diǎn)間距離　523.7　本章中的重要公式　553.7.1　三角學(xué)基礎(chǔ)函數(shù)　553.7.2　角度與弧度互轉(zhuǎn)　553.7.3　朝鼠標(biāo)(或任意一點(diǎn))旋轉(zhuǎn)　553.7.4　創(chuàng)建波　563.7.5　創(chuàng)建圓形　563.7.6　創(chuàng)建橢圓形　563.7.7　獲取兩點(diǎn)間的距離　563.8　小結(jié)　57第4章　渲染技術(shù)　584.1　canvas上的顏色　584.1.1　使用十六進(jìn)制表示顏色值　594.1.2　色彩合成　604.1.3　提取三原色　614.1.4　透明度　624.1.5　與顏色相關(guān)的工具函數(shù)　634.2　繪圖API　644.3　canvas上下文　654.4　使用clearRect消除圖案　654.4.1　設(shè)置線條的外觀　664.5　使用lineTo與moveTo繪制路徑　664.5.1　使用quadraticCurveTo繪制曲線　684.5.2　創(chuàng)建多條曲線　704.5.3　其他形式的曲線　744.6　使用填充色創(chuàng)建圖形　744.6.1　創(chuàng)建漸變填充色　754.6.2　設(shè)置漸變色的顏色　764.7　加載并繪制圖片　774.7.1　加載圖片　774.7.2　使用圖片元素　784.7.3　使用視頻元素　794.8　操縱像素　814.8.1　獲取像素?cái)?shù)據(jù)　814.8.2　繪制像素?cái)?shù)據(jù)　824.9　本章中的重要公式　864.9.1　從十六進(jìn)制轉(zhuǎn)換到十進(jìn)制　864.9.2　從十進(jìn)制轉(zhuǎn)換到十六進(jìn)制　864.9.3　組合三原色　864.9.4　提取三原色　864.9.5　繪制一條穿越某個(gè)點(diǎn)的曲線　874.10　小結(jié)　87第二部分 基本動(dòng)畫第5章　速度向量和加速度　905.1　速度向量　905.1.1　向量與速度向量　915.1.2　單軸上的速度向量　915.1.3　雙軸上的速度向量　945.1.4　角速度　945.1.5　向量加法　965.1.6　鼠標(biāo)追隨者　975.1.7　速度向量擴(kuò)展　985.2　加速度　1005.2.1　單軸加速度　1005.2.2　雙軸加速度　1025.2.3　重力加速度　1045.2.4　角加速度　1055.2.5　宇宙飛船　1075.2.6　飛船控制　1085.3　本章中的重要公式　1115.3.1　將角速度分解為x、y軸上的速度向量　1115.3.2　將角加速度(作用域物體上的力)分解為x、y軸上的加速度　1115.3.3　將加速度加入速度向量　1115.3.4　將速度向量加入位置坐標(biāo)　1115.4　小結(jié)　111第6章　邊界與摩擦力　1126.1　環(huán)境邊界　1136.1.1　設(shè)置邊界　1136.1.2　移除物體　1146.1.3　重置物體　1176.1.4　屏幕環(huán)繞　1196.1.5　反彈　1216.2　摩擦力　1246.2.1　摩擦力，正確方法　1256.2.2　摩擦力，簡(jiǎn)便方法　1266.2.3　摩擦力應(yīng)用　1276.3　本章中的重要公式　1286.3.1　移除越界物體　1286.3.2　重置越界物體　1296.3.3　越界物體的屏幕環(huán)繞　1296.3.4　應(yīng)用摩擦力(正確方法)　1296.3.5　應(yīng)用摩擦力(簡(jiǎn)便方法)　1296.4　小結(jié)　129第7章　用戶交互：移動(dòng)物體　1307.1　按下及釋放物體　1307.1.1　使用觸摸事件　1337.2　拖曳對(duì)象　1357.2.1　結(jié)合運(yùn)動(dòng)代碼的拖曳　1367.3　投擲　1397.4　小結(jié)　142第三部分 高級(jí)動(dòng)畫第8章　緩動(dòng)與彈動(dòng)　1448.1　比例運(yùn)動(dòng)　1448.2　緩動(dòng)　1458.2.1　簡(jiǎn)單緩動(dòng)　1458.2.2　高級(jí)緩動(dòng)　1538.3　彈動(dòng)　1538.3.1　一維坐標(biāo)上的彈動(dòng)　1548.3.2　二維坐標(biāo)上的彈動(dòng)　1568.3.3　向移動(dòng)的目標(biāo)點(diǎn)彈動(dòng)　1578.3.4　彈簧在哪兒　1588.3.5　鏈?zhǔn)綇梽?dòng)　1598.3.6　多個(gè)目標(biāo)點(diǎn)的彈動(dòng)　1618.3.7　目標(biāo)偏移量　1638.3.8　用彈簧連接多個(gè)物體　1658.4　本章中的重要公式　1708.4.1　簡(jiǎn)單緩動(dòng)，詳細(xì)版　1708.4.2　簡(jiǎn)單緩動(dòng)，縮略版　1708.4.3　簡(jiǎn)單緩動(dòng)，簡(jiǎn)易版　1708.4.4　簡(jiǎn)單彈動(dòng)，詳細(xì)版　1708.4.5　簡(jiǎn)單彈動(dòng)，縮略版　1718.4.6　簡(jiǎn)單彈動(dòng)，簡(jiǎn)易版　1718.4.7　有偏移量的彈動(dòng)　1718.5　小結(jié)　171第9章　碰撞檢測(cè)　1729.1　碰撞檢測(cè)的方法　1729.2　基于幾何圖形的碰撞檢測(cè)　1739.2.1　兩個(gè)物體間的碰撞檢測(cè)　1739.2.2　物體和點(diǎn)的碰撞檢測(cè)　1779.2.3　幾何圖形碰撞檢測(cè)法的總結(jié)　1799.3　基于距離的碰撞檢測(cè)　1799.3.1　基于距離的簡(jiǎn)單碰撞檢測(cè)　1809.3.2　彈性碰撞　1829.4　多物體的碰撞檢測(cè)策略　1849.4.1　基礎(chǔ)的多物體碰撞檢測(cè)　1849.4.2　多物體彈動(dòng)　1869.5　本章中的重要公式　1899.5.1　基于距離的碰撞檢測(cè)　1899.5.2　多物體碰撞檢測(cè)　1899.6　小結(jié)　189第10章　坐標(biāo)旋轉(zhuǎn)與斜面反彈　19010.1　簡(jiǎn)單坐標(biāo)旋轉(zhuǎn)　19010.2　高級(jí)坐標(biāo)旋轉(zhuǎn)　19210.2.1　旋轉(zhuǎn)單個(gè)物體　19310.2.2　旋轉(zhuǎn)多個(gè)物體　19410.3　斜面反彈　19610.3.1　執(zhí)行旋轉(zhuǎn)　19710.3.2　優(yōu)化代碼　20110.3.3　實(shí)現(xiàn)動(dòng)態(tài)效果　20210.3.4　修復(fù)“不從邊緣落下”的問題　20210.3.5　修復(fù)“線下”問題　20410.3.6　從多個(gè)斜面反彈　20510.4　本章中的重要公式　20810.4.1　坐標(biāo)旋轉(zhuǎn)　20810.4.2　反向坐標(biāo)旋轉(zhuǎn)　20810.5　小結(jié)　208第11章　撞球物理　20911.1　質(zhì)量　20911.2　動(dòng)量　21011.3　動(dòng)量守恒　21011.3.1　單軸上的動(dòng)量守恒　21211.3.2　雙軸上的動(dòng)量守恒　21611.4　本章中的重要公式　23111.4.1　動(dòng)量守恒的數(shù)學(xué)表示　23111.4.2　動(dòng)量守恒的JavaScript代碼　23111.5　小結(jié)　231第12章　粒子與萬(wàn)有引力　23212.1　粒子　23212.2　萬(wàn)有引力　23312.2.1　萬(wàn)有引力　23412.2.2　碰撞檢測(cè)及反應(yīng)　23612.2.3　軌道運(yùn)動(dòng)　23712.3　彈力　23812.3.1　萬(wàn)有引力VS彈力　23812.3.2　彈力節(jié)點(diǎn)花園　23812.3.3　相連的節(jié)點(diǎn)　24112.3.4　有質(zhì)量的節(jié)點(diǎn)　24212.4　本章中的重要公式　24412.4.1　基本引力　24412.4.2　引力公式的JavaScript實(shí)現(xiàn)　24412.5　小結(jié)　244第13章　正向運(yùn)動(dòng)學(xué)：讓物體行走　24513.1　介紹正向和反向運(yùn)動(dòng)學(xué)　24513.2　正向運(yùn)動(dòng)學(xué)編程入門　24613.2.1　移動(dòng)一個(gè)節(jié)段　24613.2.2　移動(dòng)兩個(gè)節(jié)段　25113.3　過程自動(dòng)化　25313.3.1　建立一個(gè)自然行走周期　25413.3.2　動(dòng)態(tài)調(diào)整　25713.4　讓它真實(shí)地行走　26013.4.1　給它一些空間　26013.4.2　加入重力　26013.4.3　處理碰撞　26113.4.4　處理反作用力　26213.4.5　屏幕環(huán)繞，重復(fù)　26413.5　小結(jié)　267第14章　反向運(yùn)動(dòng)學(xué)：拖曳與伸出　26814.1　伸出和拖曳單個(gè)節(jié)段　26814.1.1　伸出單個(gè)節(jié)段　26914.1.2　拖曳單個(gè)節(jié)段　27014.2　拖曳多個(gè)節(jié)段　27014.2.1　拖曳兩個(gè)節(jié)段　27114.2.2　拖曳更多節(jié)段　27214.3　伸出多個(gè)節(jié)段　27414.3.1　伸向鼠標(biāo)位置　27414.3.2　伸向一個(gè)物體　27914.3.3　加入一些交互　28014.4　使用標(biāo)準(zhǔn)反向運(yùn)動(dòng)學(xué)方法　28114.4.1　介紹余弦定理　28114.4.2　編程實(shí)現(xiàn)余弦定理　28314.5　本章中的重要公式　28514.5.1　余弦定理　28514.5.2　JavaScript中的余弦定理　28514.6　小結(jié)　285第四部分 3D動(dòng)畫第15章　三維基礎(chǔ)　28815.1　第三維度與透視圖　28915.1.1　z軸　28915.1.2　透視圖　29015.2　速度與加速度　29315.3　反彈　29515.3.1　單物體反彈　29515.3.2　多物體反彈　29715.3.3　Z排序　30015.4　重力　30115.5　屏幕環(huán)繞　30415.6　緩動(dòng)與彈動(dòng)　31115.6.1　緩動(dòng)　31115.6.2　彈動(dòng)　31215.7　坐標(biāo)旋轉(zhuǎn)　31415.8　碰撞檢測(cè)　31915.9　本章中的重要公式　32115.9.1　基本透視圖　32115.9.2　Z排序　32115.9.3　坐標(biāo)旋轉(zhuǎn)　32215.9.4　三維距離計(jì)算　32215.10　小結(jié)　322第16章　三維線條與填充　32316.1　創(chuàng)建點(diǎn)和線　32316.2　創(chuàng)建圖形　32816.3　創(chuàng)建三維填充　33216.3.1　使用三角形　33216.4　三維實(shí)體建�！�33716.4.1　建模旋轉(zhuǎn)的立方體　33716.4.2　建模其他形狀　33916.5　移動(dòng)三維實(shí)體　34316.6　小結(jié)　344第17章　背面剔除與三維燈光　34517.1　背面剔除　34617.2　增強(qiáng)的深度排序　34817.3　三維燈光　34917.4　小結(jié)　356第五部分 其他技巧第18章　矩陣數(shù)學(xué)　35818.1　矩陣基礎(chǔ)　35818.2　矩陣運(yùn)算　35918.2.1　矩陣加法　35918.2.2　矩陣乘法　36018.3　canvas變換　36318.4　小結(jié)　366第19章　秘訣與技巧　36719.1　布朗(隨機(jī))運(yùn)動(dòng)　36719.2　隨機(jī)分布　37019.2.1　正方形分布　37019.2.2　圓形分布　37219.2.3　偏向分布　37419.2.4　基于碰撞的分布　37619.3　基于定時(shí)器和基于時(shí)間的動(dòng)畫　37819.3.1　基于定時(shí)器的動(dòng)畫　37819.3.2　基于時(shí)間的動(dòng)畫　37919.4　等質(zhì)量物體之間的碰撞　38119.5　集成聲音　38219.6　小結(jié)　385附錄A　常用公式　386A.1　第3章　386A.1.1　三角學(xué)基礎(chǔ)函數(shù)　386A.1.2　角度與弧度互轉(zhuǎn)　386A.1.3　朝鼠標(biāo)指針(或任意一點(diǎn))旋轉(zhuǎn)　386A.1.4　創(chuàng)建波　386A.1.5　創(chuàng)建圓形　387A.1.6　創(chuàng)建橢圓形　387A.1.7　獲取兩點(diǎn)間的距離　387A.2　第4章　387A.2.1　從十六進(jìn)制轉(zhuǎn)換到十進(jìn)制　387A.2.2　從十進(jìn)制轉(zhuǎn)換到十六進(jìn)制　387A.2.3　組合三原色　387A.2.4　提取三原色　388A.2.5　繪制一條穿越某個(gè)點(diǎn)的曲線　388A.3　第5章　388A.3.1　將角速度分解為x、y軸上的速度向量　388A.3.2　將角加速度(作用于物體上的力)分解為x、y軸上的加速度　388A.3.3　將加速度加入速度向量　388A.3.4　將速度向量加入位置坐標(biāo)　388A.4　第6章　388A.4.1　移除越界物體　388A.4.2　重置越界物體　389A.4.3　屏幕環(huán)繞越界物體　389A.4.4　應(yīng)用摩擦力(正確方法)　389A.4.5　應(yīng)用摩擦力(簡(jiǎn)便方法)　389A.5　第8章　389A.5.1　簡(jiǎn)單緩動(dòng)，詳細(xì)版　389A.5.2　簡(jiǎn)單緩動(dòng)，縮略版　390A.5.3　簡(jiǎn)單緩動(dòng)，簡(jiǎn)易版　390A.5.4　簡(jiǎn)單彈動(dòng)，詳細(xì)版　390A.5.5　簡(jiǎn)單彈動(dòng)，縮略版　390A.5.6　簡(jiǎn)單彈動(dòng)，簡(jiǎn)易版　390A.5.7　有偏移量的彈動(dòng)　390A.6　第9章　391A.6.1　基于距離的碰撞檢測(cè)　391A.6.2　多物體碰撞檢測(cè)　391A.7　第10章　391A.7.1　坐標(biāo)旋轉(zhuǎn)　391A.7.2　反向坐標(biāo)旋轉(zhuǎn)　391A.8　第11章　391A.8.1　動(dòng)量守恒的數(shù)學(xué)表示　391A.8.2　動(dòng)量守恒的JavaScript代碼　392A.9　第12章　392A.9.1　基本引力　392A.9.2　引力公式的JavaScript實(shí)現(xiàn)　392A.10　第14章　392A.10.1　余弦定理　392A.10.2　JavaScript中的余弦定理　392A.11　第15章　393A.11.1　基本透視圖　393A.11.2　Z排序　393A.11.3　坐標(biāo)旋轉(zhuǎn)　393A.11.4　三維距離計(jì)算　393

媒體關(guān)注與評(píng)論

HTML5+JavaScript是目前最熱的移動(dòng)應(yīng)用開發(fā)技術(shù)。在HTML5的諸多新特性中，HTML5 Canvas是其中最吸引人的特性之一。它由JavaScript腳本進(jìn)行控制，可以動(dòng)態(tài)地繪制出各種2D圖形，甚至可以對(duì)圖像像素進(jìn)行任意處理。本書是面向游戲和娛樂應(yīng)用開發(fā)的HTML5圖書，在書中我們將通過最流行的Web前端開發(fā)語(yǔ)言JavaScript操縱Canvas來(lái)實(shí)現(xiàn)各種各樣的動(dòng)畫效果，通過各種各樣的示例可以觸發(fā)你聯(lián)想到如何將它們組合在一起以實(shí)現(xiàn)你的創(chuàng)意。

編輯推薦

通過HTML5+JavaScript動(dòng)畫基礎(chǔ)，你將進(jìn)入Web編程創(chuàng)意的新時(shí)代。HTML5+JavaScript動(dòng)畫基礎(chǔ)詳細(xì)介紹了如何使用HTML5的canvas元素來(lái)創(chuàng)建高級(jí)Web圖形和動(dòng)態(tài)腳本動(dòng)畫。它涵蓋了要完成各種動(dòng)畫項(xiàng)目所必需掌握的所有技能——從游戲到導(dǎo)航系統(tǒng)，從廣告到教育應(yīng)用程序。在HTML5+JavaScript動(dòng)畫基礎(chǔ)中，作者Billy Lamberta首先清晰地介紹了所有相關(guān)的數(shù)學(xué)知識(shí)，然后引入了加速度、速度向量、緩動(dòng)、彈動(dòng)、碰撞檢測(cè)、動(dòng)量守恒、3D、正向運(yùn)動(dòng)學(xué)和反向運(yùn)動(dòng)學(xué)等物理概念。他還幫你建立了一個(gè)工具集，，你可以把這些工具融入自己編寫的任意動(dòng)畫腳本中來(lái)創(chuàng)建動(dòng)態(tài)效果。在任何時(shí)候，你都能購(gòu)理解隱藏在腳本動(dòng)畫背后的概念，而且還可以創(chuàng)建各種各樣令人激動(dòng)的動(dòng)畫和游戲。對(duì)于所有使用HTML5或從Flash轉(zhuǎn)到HTML5的Web開發(fā)人員來(lái)說(shuō)，HTML5+JavaScript動(dòng)畫基礎(chǔ)正是你們夢(mèng)寐以求的，它可以引領(lǐng)你創(chuàng)建各種能夠在當(dāng)前所有的瀏覽器和大多數(shù)移動(dòng)設(shè)備（包括iPhone、iPad和Android設(shè)備）上運(yùn)行的完全符合標(biāo)準(zhǔn)的游戲、應(yīng)用程序、動(dòng)畫。

圖書封面

圖書標(biāo)簽Tags

無(wú)

評(píng)論、評(píng)分、閱讀與下載

  本文關(guān)鍵詞：HTML5+JavaScript動(dòng)畫基礎(chǔ)，由筆耕文化傳播整理發(fā)布。