前言
今后的一個月內(nèi)會連載詳細(xì)的Canvas教程似枕，從零基礎(chǔ)開始求厕，到Canvas API戈抄，再到基本動畫與高級動畫的實現(xiàn)离唬，還會介紹視音頻的處理、移動應(yīng)用划鸽，最后如果有時間會擴(kuò)展說一說3D输莺、多人應(yīng)用戚哎、游戲制作等。所以本課程雖說是Canvas教程嫂用，但其實就是詳細(xì)的介紹Canvas API型凳，之后基于Canvas實現(xiàn)其他更高級的功能。
如果你學(xué)過HTML4嘱函，或者CSS甘畅、Javascript，那么相信你入手起來會很快往弓；如果你啥都沒學(xué)過疏唾，屬于零基礎(chǔ)，那就更好了函似。因為你保有對這個未知領(lǐng)域的好奇心槐脏，這一切都會激發(fā)你更加努力的向前。而且零基礎(chǔ)的童鞋也不用擔(dān)心撇寞，本教程會在用到其他知識的時候會有詳細(xì)的擴(kuò)展說明准给，以Canvas為線索，學(xué)完它你基本上一系列的知識也都學(xué)會了重抖，買一送一簡直不能更賺了！其中也會穿插講解數(shù)學(xué)祖灰、物理學(xué)钟沛、運(yùn)動學(xué)的一些簡單的知識，每個知識點都會提供案例局扶，每個案例都會提供頁面演示恨统，源文件可以去我托管在github上的一個開源項目上下載。
提示：本教程中有鏈接的地方都不妨點一點 ：）
好了三妈，是不是摩拳擦掌畜埋、迫不及待準(zhǔn)備上了？那就讓我們開始走進(jìn)HTML5的世界吧畴蒲！
HTML5介紹
HTML5是新一代的HTML(Hyper Text Markup Language)悠鞍，即超文本標(biāo)記語言，于去年10月28日正式發(fā)布模燥，它是全新的咖祭、互聯(lián)網(wǎng)上構(gòu)建頁面的標(biāo)準(zhǔn)語言。
那么究竟什么是HTML5蔫骂？在W3C HTML5的常見問題中么翰，關(guān)于HTML5是這樣說明的：HTML5是一個開放的平臺下開發(fā)的免費許可條款。
具體來說辽旋，對這句話有以下兩種理解：
- 指一組共同構(gòu)成了未來開放式網(wǎng)絡(luò)平臺的技術(shù)浩嫌。這些技術(shù)包括HTML5規(guī)范檐迟、CSS3、SVG码耐、MATHML追迟、地理位置、XmlHttpRequest伐坏、Context 2D怔匣、Web字體以及其他技術(shù)。這一套技術(shù)的邊界是非正式的桦沉，且隨時間變化的每瞒。
- 指HTML5規(guī)范，當(dāng)然也是開放式網(wǎng)絡(luò)平臺的一部分纯露。
Canvas的瀏覽器支持
由于課程的主要內(nèi)容是Canvas剿骨，以下我列出了最流行的Web瀏覽器以及它們開始支持Canvas元素的最小版本號。
| Safari | Firefox | IE | Chrome | Opear | iOS Safari | Android Brower |
|---|---|---|---|---|---|---|
| 3.2 | 3.5 | 9 | 9 | 10.6 | 3.2 | 2.1 |
這里我推薦使用Chrome埠褪。
所以在學(xué)習(xí)本課程之前浓利，趕快給你的電腦裝上最新版的Chrome吧！
基礎(chǔ)的HTML5頁面
簡單的HTML5頁面
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基礎(chǔ)的HTML5頁面</title>
</head>
<body>
Hello Airing!
</body>
</html>
運(yùn)行結(jié)果如下：
HTML是由一個個形如尖括號<>的標(biāo)簽元素組成钞速，這些標(biāo)簽通常是成對出現(xiàn)贷掖，并且標(biāo)簽之間只能嵌套不能交叉。
擴(kuò)展：
成對出現(xiàn)的叫做閉合標(biāo)簽渴语，單個出現(xiàn)的叫做單標(biāo)簽苹威。不管怎樣都是閉合的(單標(biāo)簽可以不閉合，但是在XHTML中嚴(yán)格要求了閉合)驾凶。閉合標(biāo)簽又分為開始標(biāo)簽和結(jié)束標(biāo)簽牙甫，如
<body>是開始標(biāo)簽，</body>是結(jié)束標(biāo)簽调违。自標(biāo)簽如<input/><br/>等窟哺。
關(guān)于更多的標(biāo)簽，建議大家自行了解一下技肩。推薦W3school平臺自學(xué)且轨。
這里我們著重講一下上述代碼中出現(xiàn)的標(biāo)簽。
<!doctype html>
這個標(biāo)簽說明 Web 瀏覽器將在標(biāo)準(zhǔn)模式下呈現(xiàn)頁面虚婿。根據(jù) W3C 定義的 HTML5 規(guī)范殖告，這是 HTML5 文檔所必需的。這個標(biāo)簽簡化了長期以來在不同的瀏覽器呈現(xiàn) HTML 頁面時出現(xiàn)的奇怪差異雳锋。它通常為文檔中的第一行黄绩。
<html lang="en">
這是包含語言說明的<html>標(biāo)簽，例如玷过，"en"為英語爽丹，"zh"為中文筑煮。
<head>...</head>
這2個標(biāo)記符分別表示頭部信息的開始和結(jié)尾。頭部中包含的標(biāo)記是頁面的標(biāo)題粤蝎、序言真仲、說明等內(nèi)容，它本身不作為內(nèi)容來顯示初澎，但影響網(wǎng)頁顯示的效果秸应。頭部中最常用的標(biāo)記符是<title>標(biāo)記符和<meta>標(biāo)記符。
以下表格列出了HTML head 元素下的所有標(biāo)簽和功能：
標(biāo)簽 描述 <head>定義了文檔的信息 <title>定義了文檔的標(biāo)題 <base>定義了頁面鏈接標(biāo)簽的默認(rèn)鏈接地址 <link>定義了一個文檔和外部資源之間的關(guān)系 <meta>定義了HTML文檔中的元數(shù)據(jù) <script>定義了客戶端的腳本文件 <style>定義了HTML文檔的樣式文件
<meta charset="UTF-8">
這個標(biāo)簽說明 Web 瀏覽器使用的字符編碼模式碑宴，這里通常設(shè)置為UTF-8软啼。如果沒有需要特別設(shè)置的沒必要改變它。這也是 HTML5 頁面需要的元素延柠。
<title>...</title>
這個標(biāo)簽說明在瀏覽器窗口展示的 HTML 的標(biāo)題祸挪。這是一個很重要的標(biāo)記，它是搜索引擎用來在 HTML 頁面上收錄內(nèi)容的主要信息之一贞间。
<body>...</body>
網(wǎng)頁中顯示的實際內(nèi)容均包含在這2個<body>之間贿条。
綜上，HTML5網(wǎng)頁是由第一行的<!doctype html>與<html>部分組成增热，而<html>主要分為兩部分——由<head>標(biāo)簽規(guī)定的頭部部分整以，和由<body>規(guī)定的主體部分。
這樣峻仇，我們就把最簡單的HTML網(wǎng)頁的基本結(jié)構(gòu)給捋出來了公黑。
好的，接下來就讓我們的主角Canvas登場吧础浮！不過，在此之前奠骄，建議大家自行了解一下HTML的常用標(biāo)簽及其功能~
如果您喜歡本書豆同，請使用支付寶掃描下面的二維碼捐助作者。
謝謝您的支持含鳞！也歡迎您訂閱本書影锈。
如果書中有疏漏或錯誤之處，敬請您指出蝉绷，期待您的pull request鸭廷。如果有任何疑問也可以發(fā)送issue。
本人郵箱：airing@ursb.me
本人博客：http://ursb.me
本書地址：http://airingursb.gitbooks.io/canvas
本書github：http://github.com/airingursb/canvas
