《Canvas繪圖詳解》是慕課網提供的慕課課程，授課老師是liuyubobobo。
基本介紹
- 中文名：Canvas繪圖詳解
- 提供方：慕課網
- 類別：慕課
- 授課老師：liuyubobobo
課程簡介,課程大綱,
課程簡介
本課程為Canvas系列課程第二課。通過對《絢麗的倒計時效果的學習》，在大家對Canvas繪圖有一定了解的基礎上，本課程對Canvas的各個圖形接口進行了系統詳細地介紹，並輔以示例，讓同學徹底掌握Canvas繪圖，隨心所欲在瀏覽器上繪製炫麗效果！
課程大綱
第1章讓我們繼續Canvas繪圖之旅
通過《絢麗的倒計時效果》，相信大家已經對Canvas繪圖有了基礎的理解。現在，讓我們繼續Canvas之旅吧！
1-1繼續Canvas繪圖之旅（02:17）
第2章從線條開始
線條元素雖然簡單，但不可小覷。它是構成圖形的基礎元素。本章詳細介紹了Canvas繪圖中使用線條構成基本圖形元素的方法。
2-1回顧——從線條開始（05:40）
2-2畫一條直線
2-3線條組成的圖形和beginPath（09:34）
2-4多邊形的填充和closePath（07:56）
2-5矩形、覆蓋和透明色（06:36）
2-6小結：從線條開始（02:18）
第3章線條的屬性
引入一個更加複雜的圖形繪製案例——畫一個五角星。並且通過這個案例，詳細說明Canvas線條屬性的使用。
3-1線條的帽子：lineCap（04:59）
3-2畫一個五角星（13:04）
3-3線條的連線：lineJoin和miterLimit（05:03）
3-4小結：線條的屬性（01:32）
第4章星空和圖形變換
拓展五角星的繪製，繪製多個五角星組成一片星空，並且據此介紹Canvas中圖形變換相關功能的使用。
4-1畫一片星空（06:11）
4-2圖像變換和狀態保存（08:59）
4-3套用translate、rotate和scale（06:55）
4-4深入理解圖形變換（08:30）
4-5小結：星空和圖形變換（01:08）
第5章填充樣式
本章詳細介紹了fillStyle可以使用的所有樣式。除了使用一種顏色以外，還包括使用線性漸變或者徑向漸變進行漸變色的填充；使用圖片、畫布或者video視頻進行樣式填充。
5-1線性漸變（10:30）
5-2徑向漸變（04:18）
5-3使用圖片、畫布或者video（07:00）
5-4漸變色和紋理小結（02:01）
第6章曲線的繪製
本章詳細分析了Canvas繪圖提供的四個曲線繪製函式，使得大家可以在自己的Canvas畫布上任意繪製弧線或者曲線，大大拓展了繪製的靈活性。
6-1arc()，圓弧和圓角矩形（12:26）
6-2arcTo()，另一種弧線繪製方法（07:21）
6-3繪製一角彎月(10:00)
6-4quadraticCurveTo()，二次貝塞爾曲線（04:45）
6-5bezierCurveTo()，三次貝塞爾曲線（05:55）
6-6小結：曲線的繪製（01:34）
第7章文字的渲染
本章詳細介紹了在canvas上進行文字渲染的方式。學習本章後，大家可以圖文並茂地使用Canvas，創建屬於自己的Canvas套用。
7-1文字渲染基礎（05:42）
7-2font：字型、字號和字型（08:55）
7-3文本對齊（06:35）
7-4文本的度量（02:39）
7-5小結：文字的渲染（01:52）
第8章Canvas高級內容
給自己的繪圖添加陰影；制定全局透明色；製作絢麗的探照燈效果或者剪紙效果；為Canvas繪圖添加互動能力……本章探討了5個不同側面的高級話題，讓你意識到，Canvas繪圖——只有想不到，沒有做不到！
8-1陰影（06:18）
8-2globalAlpha和globalCompositeOperation（14:44）
8-3clip和剪輯區域（08:27）
8-4路徑方向和剪紙效果（08:55）
8-5使用Canvas互動和isPointInPath（08:05）
8-6總結：Canvas高級內容（02:22）
第9章Canvas之旅仍在繼續
Canvas是如此的具有魅力，將web從傳統的文檔顯示帶入了一個全新的境地。Canvas標準一直在更新，同時，我們的Canvas之旅遠沒結束。讓我們一起看看，使用Canvas，我們還有可能做出什麼。
9-1在Canvas中使用其他HTML元素（07:25）
9-2Canvas標準一直在更新（07:50）
9-3擴展Canvas的context（09:49）
9-4Canvas與瀏覽器兼容性（06:03）
9-5Canvas圖形庫（04:26）
9-6如何使用Canvas處理圖像（02:23）
