産品特色
編輯推薦
含金量高 前端精品內容薈萃,強化基礎提升實戰技能。
通俗易懂 語言風格輕鬆幽默,形象生動講解枯燥知識。
係統學習 掌握前端高級技巧,清晰流暢學習進階內容。
貼近讀者 結閤自身學習經曆,文字極具溫度不失嚴謹。
直擊痛點 規避開發思維誤區,精煉濃縮直指技術本質。
內容簡介
全書共分為兩大部分,首部分是Canvas基礎內容,主要學習Canvas API語法,其中包括圖形繪製、綫條操作、文本操作、圖片操作、變形操作、像素操作等各種基礎API。第二部分是Canvas進階內容,主要學習Canvas動畫開發,包括事件操作、物理動畫、邊界檢測、碰撞檢測、高級動畫等各種稀有技巧。
除瞭知識的講解,教程還融入瞭大量的開發案例,並且更加注重實戰編程思維的培養,為學習者提供一個流暢的學習思路。
作者簡介
2011~2015就讀於暨南大學信科院計算機科學與技術專業,從事前後端開發一年多,開發過綠葉學習網、廣州智能工程研究會網站、大量在綫應用工具,業餘時間閱讀大量國內外技術書籍。 現為綠葉學習網(http://www.lvyestudy.com)的站長,該網站用於分享自己在前後端開發中的一些經驗,並且製作相關前後端開發的在綫教程。這些在綫教程在互聯網引起廣泛關注,極大受到網友推崇。本人編寫過大量原創在綫教程,每一個教程廣受網友稱贊與推崇。 ?
已經齣版的兩本書憑藉抓實的內容、清晰的講解,獲得瞭廣大讀者的一緻好評。
《Web前端開發精品課——HTML與CSS 基礎教程》
《Web前端開發精品課 HTML與CSS進階教程》
目錄
目 錄
第一部分 Canvas基礎
第1章 Canvas概述
1.1 Canvas簡介 1
1.1.1 Canvas是什麼 1
1.1.2 Canvas與SVG 2
1.2 Canvas元素知識 3
1.2.1 Canvas元素 4
1.2.2 Canvas對象 5
第2章 直綫圖形
2.1 直綫圖形簡介 8
2.2 直綫 8
2.2.1 Canvas坐標係 8
2.2.2 直綫的繪製 9
2.3 矩形 14
2.3.1 “描邊”矩形 15
2.3.2 “填充”矩形 17
2.3.3 rect()方法 20
2.3.4 清空矩形 22
2.4 多邊形 25
2.4.1 Canvas繪製箭頭 25
2.4.2 Canvas繪製正多邊形 26
2.4.3 五角星 29
2.5 訓練題:繪製調色闆 31
第3章 麯綫圖形
3.1 麯綫圖形簡介 34
3.2 圓形簡介 34
3.2.1 圓形 34
3.2.2 “描邊”圓 35
3.2.3 “填充”圓 38
3.3 弧綫 39
3.3.1 arc()畫弧綫 39
3.3.2 arcTo()畫弧綫 42
3.4 二次貝塞爾麯綫 47
3.5 三次貝塞爾麯綫 50
3.6 訓練題:繪製扇形 53
第4章 綫條操 作
4.1 綫條操作 57
4.2 lineWidth屬性 58
4.3 lineCap屬性 60
4.4 lineJoin屬性 63
4.5 setLineDash()方法 65
第5章 文本操作
5.1 文本操作簡介 67
5.2 文本操作“方法” 68
5.2.1 strokeText()方法 68
5.2.2 fillText()方法 69
5.2.3 measureText()方法 71
5.3 文本操作“屬性” 73
5.3.1 font屬性 73
5.3.2 textAlign屬性 74
5.3.3 textBaseline屬性 76
第6章 圖片操作
6.1 圖片操作簡介 79
6.2 繪製圖片 79
6.2.1 drawImage(image , dx , dy) 80
6.2.2 drawImage(image , dx , dy ,
dw , dh) 83
6.2.3 drawImage(image , sx , sy ,
sw ,sh, dx , dy , dw , dh) 84
6.3 平鋪圖片 86
6.4 切割圖片 89
6.5 深入圖片操作 92
第7章 變形操作
7.1 變形操作簡介 95
7.2 圖形平移 96
7.2.1 translate()方法 96
7.2.2 clearRect()方法清空
Canvas 99
7.3 圖形縮放 100
7.3.1 scale()方法 100
7.3.2 scale()方法的負作用 103
7.4 圖形鏇轉 105
7.4.1 rotate()方法 105
7.4.2 改變鏇轉中心 108
7.5 變換矩陣 109
7.5.1 transform()方法 109
7.5.2 setTransform()方法 114
7.6 深入變形操作 116
7.7 訓練題:繪製絢麗的圖形 117
7.8 訓練題:繪製彩虹 119
第8章 像素操作
8.1 像素操作簡介 121
8.1.1 getImageData()方法 121
8.1.2 putImageData()方法 122
8.2 反轉效果 123
8.3 黑白效果 126
8.4 亮度效果 130
8.5 復古效果 131
8.6 紅色濛版 133
8.7 透明處理 136
8.8 createImageData()方法 137
第9章 漸變與陰影
9.1 綫性漸變 141
9.2 徑嚮漸變 145
9.3 陰影 150
第10章 Canvas路徑
10.1 路徑簡介 156
10.2 beginPath()方法和
closePath()方法 156
10.2.1 beginPath()方法 157
10.2.2 closePath()方法 160
10.3 isPointInPath()方法 165
第11章 Canvas狀態
11.1 狀態簡介 168
11.2 clip()方法 168
11.3 save()方法和restore()方法 171
11.3.1 圖形或圖片剪切 172
11.3.2 圖形或圖片變形 174
11.3.3 狀態屬性的改變 176
第12章 其他應用
12.1 Canvas對象 178
12.1.1 Canvas對象屬性 178
12.1.2 Canvas對象方法 180
12.2 globalAlpha屬性 182
12.3 globalCompositeOperation
屬性 183
12.4 stroke()和fill() 187
第二部分 Canvas進階
第13章 事件操作
13.1 Canvas動畫簡介 191
13.2 鼠標事件 192
13.2.1 什麼是鼠標事件 192
13.2.2 獲取鼠標位置 192
13.3 鍵盤事件 195
13.3.1 什麼是鍵盤事件 195
13.3.2 獲取物體移動方嚮 195
13.4 循環事件 199
第14章 物理動畫
14.1 物理動畫簡介 202
14.2 三角函數簡介 203
14.2.1 什麼是三角函數 203
14.2.2 Math.atan()與Math.
atan2() 204
14.3 三角函數應用 210
14.3.1 兩點間的距離 210
14.3.2 圓周運動 212
14.3.3 波形運動 217
14.4 勻速運動 222
14.4.1 什麼是勻速運動 222
14.4.2 速度的閤成和分解 224
14.5 加速運動 227
14.5.1 什麼是加速運動 227
14.5.2 加速度的閤成和分解 231
14.6 重力 233
14.6.1 什麼是重力 233
14.6.2 重力的應用 235
14.7 摩擦力 238
第15章 邊界檢測
15.1 邊界檢測簡介 241
15.2 邊界限製 242
15.3 邊界環繞 245
15.4 邊界生成 250
15.5 邊界反彈 256
第16章 碰撞檢測
16.1 碰撞檢測簡介 262
16.2 外接矩形判定法 262
16.3 外接圓判定法 271
16.4 多物體碰撞 275
16.4.1 排列組閤 275
16.4.2 多物體碰撞 275
第17章 用戶交互
17.1 用戶交互簡介 283
17.2 捕獲物體 284
17.2.1 什麼是捕獲物體 284
17.2.2 捕獲靜止物體 285
17.2.3 捕獲運動物體 287
17.3 拖拽物體 291
17.4 拋擲物體 297
第18章 高級動畫
18.1 高級動畫簡介 306
18.2 緩動動畫簡介 306
18.3 緩動動畫應用 313
18.4 彈性動畫簡介 317
18.5 彈性動畫應用 323
第19章 Canvas遊戲開發
19.1 Canvas遊戲開發簡介 327
19.2 Box2D簡介 328
19.2.1 Box2D 328
19.2.2 Box2DWeb 328
19.3 HTML5遊戲引擎 331
第20章 Canvas圖錶庫
20.1 Canvas圖錶庫簡介 334
20.2 ECharts和HightCharts 336
《HTML5 Canvas交互式動畫與遊戲開發實戰》 內容簡介: 這本書是一本專為Web前端開發者打造的深度技術實戰指南,聚焦於利用HTML5 Canvas API構建復雜、流暢、高交互性的動畫和遊戲。它不僅會講解Canvas的基礎繪圖原理和常用API,更將深入探討如何運用Canvas實現令人驚嘆的視覺效果、響應式交互以及性能優化策略,幫助開發者從零開始,一步步掌握Canvas在現代Web應用中的強大潛力,特彆是在遊戲開發、數據可視化、富媒體展示等領域。 第一部分:Canvas基礎與核心概念 Canvas入門與坐標係: 理解Canvas元素在HTML中的作用,以及如何通過JavaScript獲取Canvas上下文。 深入剖析Canvas的繪圖坐標係,包括原點、X軸、Y軸的方嚮,以及像素與坐標的關係。 學習如何設置Canvas的尺寸,並探討不同設備分辨率下的適配問題。 講解`CanvasRenderingContext2D`對象,這是進行所有Canvas繪圖操作的入口,並介紹其主要方法和屬性。 基本圖形繪製: 直綫與路徑: 詳細講解`lineTo()`、`moveTo()`、`arc()`、`quadraticCurveTo()`、`bezierCurveTo()`等方法,學習如何構建復雜的路徑。 矩形與圓形: 掌握`fillRect()`、`strokeRect()`、`clearRect()`、`arc()`等方法,並學習如何填充、描邊和清除矩形及圓形。 顔色與樣式: 深入研究`fillStyle`、`strokeStyle`屬性,支持純色、漸變(綫性漸變`createLinearGradient()`和徑嚮漸變`createRadialGradient()`)和圖案填充(`createPattern()`)。 綫段樣式: 學習`lineWidth`、`lineCap`(`butt`、`round`、`square`)、`lineJoin`(`round`、`bevel`、`miter`)等屬性,控製綫段的粗細、端點和連接樣式。 文本繪製: 掌握`fillText()`、`strokeText()`方法,設置`font`、`textAlign`(`start`、`end`、`center`、`left`、`right`)、`textBaseline`(`top`、`bottom`、`middle`、`alphabetic`、`hanging`)等屬性,實現靈活的文本顯示。 Canvas的圖形變換: 平移(Translate): 學習`translate()`方法,理解它如何改變坐標係的原點。 縮放(Scale): 掌握`scale()`方法,實現圖形的放大和縮小。 鏇轉(Rotate): 學習`rotate()`方法,理解它如何圍繞原點鏇轉坐標係。 變換矩陣(Transform Matrix): 深入理解Canvas的變換矩陣工作原理,以及`setTransform()`和`transform()`方法如何進行更精密的變換組閤。 保存與恢復狀態: 講解`save()`和`restore()`方法,學習如何保存和恢復Canvas的繪圖狀態(包括變換、顔色、樣式等),這對於實現復雜的動畫和避免狀態汙染至關重要。 圖像操作: 加載與繪製圖像: 學習如何使用`Image`對象加載外部圖像,並通過`drawImage()`方法將其繪製到Canvas上。 圖像裁剪與縮放: 掌握`drawImage()`方法的重載,實現對圖像的局部裁剪和指定尺寸的縮放。 像素級操作: 講解`getImageData()`、`putImageData()`、`createImageData()`方法,以及`ImageData`對象的結構(`data`屬性),學習如何直接讀取和修改Canvas上的像素數據,為圖像濾鏡、粒子係統等高級應用奠定基礎。 圖像閤成(Compositing): 探索`globalCompositeOperation`屬性,學習不同的閤成模式(如`source-over`、`destination-over`、`lighter`、`xor`等),實現圖層疊加、摳像等效果。 第二部分:HTML5 Canvas高級應用與交互 事件處理與用戶交互: 鼠標事件: 詳細講解`click`、`mousedown`、`mouseup`、`mousemove`、`mouseover`、`mouseout`等事件在Canvas上的應用。 觸摸事件: 介紹`touchstart`、`touchmove`、`touchend`事件,以及`TouchList`和`Touch`對象,實現移動設備上的交互。 坐標轉換: 講解如何將屏幕坐標(事件對象中的`clientX`/`clientY`)轉換為Canvas內部坐標,是實現精確交互的關鍵。 區域拾取(Hit Testing): 學習如何判斷用戶點擊的坐標是否落在一個特定的圖形區域內,實現元素的選中、拖拽等功能。 拖拽功能實現: 從基本的鼠標按下、移動、釋放事件鏈條,逐步構建一個健壯的拖拽組件,支持多個可拖拽對象。 動畫原理與實現: 定時器動畫: 講解`setInterval()`和`setTimeout()`在Canvas動畫中的局限性,以及它們如何導緻動畫不流暢。 `requestAnimationFrame`: 深入理解`requestAnimationFrame()`的工作機製,它如何與瀏覽器的渲染幀同步,實現平滑、高效的動畫。 動畫循環(Animation Loop): 構建一個標準的Canvas動畫循環,包含更新狀態、繪製幀、請求下一幀的流程。 緩動函數(Easing Functions): 介紹綫性緩動、二次方緩動、彈性緩動等概念,並實現常用緩動函數的JavaScript代碼,使動畫效果更加自然生動。 狀態管理: 講解如何有效地管理動畫過程中各個元素的狀態(位置、大小、顔色、透明度等),為復雜動畫提供結構。 粒子係統開發: 粒子對象結構: 定義一個基本的粒子對象,包含位置、速度、大小、顔色、生命周期等屬性。 粒子創建與更新: 編寫邏輯,根據設定的規則隨機生成粒子,並更新每個粒子的狀態(例如,模擬風力、引力、碰撞等)。 粒子渲染: 使用`fillRect()`或`drawImage()`方法將粒子繪製到Canvas上,並考慮粒子數量對性能的影響。 粒子發射器(Emitter): 構建一個粒子發射器,控製粒子的生成速率、方嚮、生命周期等參數,實現火焰、煙霧、星光等效果。 性能優化: 討論如何優化粒子係統的性能,例如,隻重繪發生變化的區域、閤並繪製操作、使用對象池等。 Canvas性能優化技巧: 最小化重繪: 僅重繪畫布上發生變化的部分,而不是每次都清空整個Canvas。 離屏Canvas(Offscreen Canvas): 使用不可見的Canvas作為緩衝區,預先繪製復雜的背景或靜態元素,減少主Canvas的負擔。 批量繪製: 將多個繪製操作閤並成一次,減少Canvas上下文的調用次數。 `requestAnimationFrame`的閤理使用: 避免在動畫循環中執行不必要的耗時操作。 Canvas髒矩形(Dirty Rectangles): 概念性介紹,理解如何通過跟蹤受影響的區域來優化渲染。 圖片加載優化: 異步加載圖片,並考慮圖片緩存策略。 內存管理: 及時釋放不再使用的Canvas對象和圖像資源。 第三部分:Web前端中的Canvas遊戲開發實戰 遊戲框架設計: 遊戲主循環: 整閤前麵學到的動畫循環,構建穩定可靠的遊戲主循環。 遊戲狀態管理: 設計狀態機(如:開始菜單、遊戲進行中、暫停、遊戲結束),管理遊戲在不同狀態下的邏輯。 場景管理: 學習如何創建和切換不同的遊戲場景(如:主菜單、關卡一、關卡二)。 資源加載與管理: 編寫資源加載器,統一管理遊戲所需的圖片、音頻等資源。 遊戲元素設計與實現: 遊戲角色: 設計玩傢角色、敵人等遊戲對象,包含其屬性(位置、速度、生命值、動畫幀等)和行為(移動、攻擊、受傷)。 碰撞檢測: 實現不同幾何形狀(矩形、圓形)之間的碰撞檢測算法,這是遊戲交互的核心。 遊戲物理模擬: 引入簡單的物理引擎概念,模擬重力、加速度、慣性等,使遊戲角色運動更真實。 遊戲UI設計: 使用Canvas繪製遊戲得分、生命值、道具欄等UI元素。 具體遊戲案例開發: 經典平颱跳躍遊戲: 實現角色控製(跳躍、左右移動)。 設計關卡地圖,實現平颱碰撞檢測。 添加敵人AI,實現簡單的巡邏和追擊。 實現道具拾取和生命值係統。 射擊類小遊戲: 實現射擊邏輯,生成子彈。 實現敵人生成與移動。 處理子彈與敵人的碰撞。 添加得分和遊戲結束條件。 益智類小遊戲(如:俄羅斯方塊、推箱子): 實現遊戲棋盤邏輯。 設計遊戲元素(方塊、箱子)的生成、移動和鏇轉。 處理遊戲規則(消除、推動)。 與JavaScript框架/庫的結閤(可選): 簡單介紹如何將Canvas與React, Vue等現代前端框架結閤使用,管理Canvas組件的生命周期和狀態。 提及一些優秀的Canvas庫(如PixiJS, Phaser等)的功能,以及何時考慮使用它們來加速開發。 第四部分:Canvas的更多可能性與未來 Canvas在數據可視化中的應用: 繪製圖錶(柱狀圖、摺綫圖、餅圖)。 實現交互式數據探索。 動態數據更新與渲染。 WebGL與Canvas的協同: 簡要介紹WebGL,它是在Canvas基礎上實現的3D圖形渲染API。 討論何時選擇Canvas,何時選擇WebGL,以及兩者可能的結閤方式。 Canvas的性能調優深入研究: 更高級的像素操作技巧。 多綫程Canvas(Web Workers)的應用。 GPU加速的Canvas繪圖(通過WebGL)。 Canvas的未來發展趨勢: Canvas API的不斷演進。 在遊戲、AR/VR、教育等領域的更廣泛應用。 與其他Web技術的融閤。 本書特色: 實戰導嚮: 理論與實踐緊密結閤,通過大量的代碼示例和完整的案例,讓讀者快速掌握Canvas的各項技能。 循序漸進: 從基礎概念到高級應用,層層遞進,即使是Canvas新手也能輕鬆上手,並逐步深入。 技術深度: 深入剖析Canvas的工作原理,講解性能優化技巧,幫助開發者構建高性能、高質量的Canvas應用。 遊戲開發視角: 特彆關注Canvas在遊戲開發中的應用,提供豐富的遊戲元素設計、碰撞檢測、動畫實現等實戰經驗。 前沿技術: 涵蓋瞭HTML5 Canvas的最新特性和發展趨勢,幫助開發者緊跟技術潮流。 本書將帶領您進入一個充滿無限可能的Canvas世界,無論是想要製作酷炫的網頁動畫,還是開發一款獨立的Web小遊戲,亦或是進行復雜的數據可視化呈現,《HTML5 Canvas交互式動畫與遊戲開發實戰》都將是您不可或缺的寶貴資源。