本節書摘來自異步社群《html5+javascript動畫基礎》一書中的第2章，第2.2節，作者：【美】billy lamberta , keith peters著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
本書将建立可通過web浏覽器檢視的html5檔案。html5是最新一代html（hyper text markup language超文本标記語言），該語言用于将内容結構化為有組織的層次并展現在網際網路上。html元素是建立網頁的基石。在本書編撰期間，html5規範仍在制定階段，不過許多功能已趨于穩定并可随時運用到産品上，例如，canvas元素。html5加入了一些新元素并為多媒體内容（例如，音頻與視訊）提供了更好的支援，進而進一步完善了在1997被制定為标準的html4。由于這些新的并在語義上有意義的元素暴露了一系列可在html檔案中通路的屬性以及控件，是以可以通過javascript用程式設計方式操作它們，這賦予了我們建立并控制媒體的有效手段。
html5是一系列獨立功能的集合。當談及一個特定浏覽器是否支援html5時，這不是一個全有全無的問題，合理的做法是測試該浏覽器是否支援規範中定義的某個特定功能。不同的浏覽器可能對不同的功能有不同程度的支援。不過這使得開發者很難決定是否采用某個html5元素，因為他猜不到使用者會使用何種浏覽器檢視檔案。随着各個浏覽器的不斷改進，跨越各個平台的html5功能檢測變得越來越容易，目前開發者應該總是檢測使用者的web浏覽器是否支援某個html5功能并為之提供備用方案，即便備用方案隻是一句委婉地提示使用者更新浏覽器的消息。
2.2.1 對canvas的支援
一個至少對本書而言有利的好消息是所有主流的浏覽器廠商都提供了對 canvas 元素的支援。這意味着，隻要使用者将他的浏覽器更新到了最新的版本，他就可以看到我們建立的動畫。遊戲和動畫對推動使用者更新他們的浏覽器是一種有利的刺激，因為大多數的人在經曆過近十年的視訊遊戲的發展後很容易了解頂尖的圖像效果需要最新的軟硬體支援。至少說服使用者更新浏覽器比讓他買一個全新的遊戲主機要容易多了。
萬一某個web浏覽器不支援canvas元素，在html檔案中，開發者仍可以在canvas标簽中提供如下備用内容：
該警告消息僅在浏覽器無法識别canvas标簽時才會顯示。如果浏覽器支援該标簽，它會呈現canvas元素并忽略其中内嵌的
元素。
還可以在html檔案中加入以下javascript代碼，以程式設計方式測試浏覽器是否支援canvas元素：
以上代碼建立了一個新的canvas元素并測試getcontext屬性是否存在，而我們知道一個有效的html5 canvas元素是包含該屬性的。是以，如果浏覽器确實支援canvas元素，你将會在調試控制台上看到成功的消息。
表2-1列出了最流行的web浏覽器以及它們開始支援canvas元素的最小版本号。
2.2.2 性能
程式設計圖形一直并且在可預見的将來也是一項計算量很大的操作。原因很簡單，你能做的越多，你想要做的也越多，同時對系統的性能要求也越高。視訊遊戲過去25年的曆史是一段令人驚歎的技術發展之旅，從遊樂場遊戲機中的塊狀角色發展到了今天運作在遊戲主機上的讓人身臨其境的3d世界。不過，我們還是想做得更好。我們時常拿計算機動畫與現實世界中的一些特效做對比：例如，人物的真實感、光影特效與實體效果。令人驚歎的是，這些模拟竟經得起人們的審視，而且不止一兩個例子如此。我們目前還處在計算機動畫的起步階段，随着計算機不斷地變快（得益于摩爾定律），開發人員不斷改善技術，人類在視覺創造上的能力将永無止境。
不過使用canvas元素在web上繪制動畫還處在它的孵化期，現在這隻是被視為使用諸如adobe flash這樣的浏覽器插件實作動畫的一種替代方式。最近幾年，開發者在web浏覽器以及javascript引擎中的速度和性能上取得了突破性的發展，鑒于此領域競争異常激烈，我們可以預見到将來會有更多的優化和提升。
本書中編寫的示例可以在近期的電腦和web浏覽器上獲得流暢以及合理的性能表現。不過讀者的電腦組態可能與作者有差異，是以當你在實驗本書中的源代碼時，盡可以調整某些參數的設定以獲得更加流暢的體驗。而且嘗試不同的參數值并觀察結果的變化也是一種學習公式工作原理的更好途徑。
不過，在你對外分享任何動畫前，請在盡可能多的裝置上加以測試。因為越來越多的人開始使用行動電話與平闆電腦而不是傳統的桌上型電腦來通路web，開發者需要兼顧到各種不同裝置上的性能差異。針對各種不同平台的測試和度量是確定代碼能夠表現良好的唯一手段。
2.2.3 html5基本文檔
web開發的一個非常大的優勢在于建立和檢視檔案非常容易，你所需的僅僅是一個文本編輯器和web浏覽器。下面這個簡單的代碼片段提供本書中所有示例的初始設定。以下是開發者将使用的一份基本的html5檔案，在介紹完這些元素的結構後，為清晰起見，我們會做一些小的補充：
将該檔案另存為01-skeleton.html并在web浏覽器中打開它。因為這是一份空白的檔案，是以在浏覽器中你不會看到任何内容，不過該頁面确實已載入并且它還是一份完全有效的html5檔案（可以通過在浏覽器中檢視源代碼确認網頁中包含特定内容）。
現在逐漸介紹檔案中所涉及的每個元素。第一行隻是簡單地聲明了本檔案類型為html5。如果你接觸過html4的各種檔案類型的話，你會發現html5的聲明是多麼簡單：
<code><!doctype html></code>
接下來，聲明作為根節點的html元素以及header元素：
在head元素中，首先将檔案的字元編碼方式設定為utf-8。utf-8是unicode的一種編碼方式，它是一種通用字元集，其中定義了世界上大多數語言所用到的字元。浏覽器使用該編碼方式讀取檔案中的字元并将它們以格式化的文本顯示出來。這些檔案以一系列的位元組存儲在某個伺服器的檔案中，它們通過網絡傳輸，然後在使用者的電腦上重新組裝并顯示在web浏覽器中。字元編碼方式告訴浏覽器如何将一系列位元組轉換為一串字元，這些字元經過處理并顯示為一張網頁。如果不在檔案中聲明編碼格式，浏覽器将試圖（錯誤地）猜測檔案的編碼格式，或（錯誤地）使用一個預設的設定，而這可能導緻頁面顯示出錯。開發者最好在檔案中顯式指定字元編碼格式以避免潛在的困惑。
所有有效的html5檔案都包含一個也内嵌在header中的title元素，由于用到了css樣式表，是以在執行個體中建立了一個指向外部檔案的link元素。外部檔案會包含檔案中所用的樣式定義，稍後再對style.css檔案做進一步介紹。
在設定好header元素後，讓我們來看看檔案的剩餘部分：
在body元素中放置了一個canvas元素。這是我們畫動畫以及腳本中将引用的地方。為了讓我們可以在浏覽器中看到它，這裡為canvas設定了height與width，同時通過指定id，我們可以通過dom接口通路該元素。
在canvas元素後，加入了一個script标簽，其中将包含每個示例的javascript代碼。為了確定不要在加載檔案中其他元素前執行腳本，我們将script标簽放在其他元素之後，末尾的body标簽之前。這樣做還有一個好處在于當腳本來自另一個檔案，甚至有可能是另一個伺服器上的檔案時，可以避免等待下載下傳該檔案時無法并行加載檔案的其他内容。這有助于加快加載速度和檔案響應速度。
架構腳本非常簡單并且實際上沒做什麼事情。window對象是document object model（檔案對象模型）中的頂層對象，通過它可以通路dom。當檔案加載完畢後，window對象會執行與之onload屬性關聯的函數。
本書中的示例代碼将放置在window.onload的回調函數中。由于該方法在檔案中的所有元素加載完成後才會執行，是以可以確定canvas元素在調用代碼的時候可以正确通路。不過随之而來了的問題是如果檔案中包含大量的内嵌資料，比如大圖檔，window.onload方法就不得不等待相當長得時間才能被執行到。此時，最好使用javascript加載那些耗時的資源，在第四章将會介紹如何做到這一點。
最終，随着我們關閉script、body以及html标簽，一個基本但是完全有效的html5檔案建立完畢。
2.2.4 css樣式表
在檔案的header元素中，建立了一個link指向css樣式表。現在，讓我們看看那個樣式表檔案。本書用到的樣式定義刻意簡化了，隻聲明了檔案中body與canvas元素的背景色。canvas預設的背景色是透明的，這個顔色可能是你想要的，不過為了讓你看清楚canvas元素在檔案中的确切位置，把背景色改成了白色。下面是style.css檔案的樣式表定義：
這裡假設檔案中包含一個id為canvas的元素。樣式表的複雜程度将随着檔案的複雜程度而變化。html檔案定義了檔案的結構，css樣式表則定義了元素的樣式或外觀。一般來說，最好将檔案的内容、樣式和腳本分布在不同的檔案中。
2.2.5 額外的腳本
當示例變得更加複雜時，可能需要重用部分代碼，此時為了更加清晰，将代碼分離到不同的檔案中則成為一種友善的做法。當新聲明的類将用于多個練習時，當函數的繁雜實作會分散我們對目前話題的注意力時，我們會把它們放入另一個檔案中。
在本書中，我們會将那些工具函數放在一個名為utils.js的檔案加以維護。該腳本包含了為示例建立樣闆代碼的函數，進而讓我們更關注于本質的動畫原理。因為我們會在引入每個函數的時候加以解釋，是以這個腳本檔案對你來說不會是一個黑盒子。
在該檔案中，許多工具函數會作為屬性添加到一個名為utils的javascript全局對象中。這樣做可以避免在全局名稱空間中堆滿許多函數。為此，確定在utils.js檔案中最開始的地方像下面這樣聲明一個空對象：
<code>var utils = {};</code>
為了把該檔案或其他腳本導入檔案中，需要建立一個script元素并設定它的src屬性為腳本檔案的位址。為了確定每個函數在試圖使用前加載，請在示例代碼前引入該元素：
2.2.6 調試
編寫代碼的一個最重要的方面就是調試代碼。在web開發的早期，調試代碼意味不斷彈出警告視窗。值得慶幸的是，web浏覽器現在提供了越來越進階的調試工具用于代碼審查和性能分析。因為這些工具使得你可以單步調試一個正在運作的程式并與之互動，是以你可以确切地了解代碼在某一特定時刻在做什麼。
可以肯定地說，每一個支援html5的浏覽器都有内置的開發工具以及一個用于輸入javascript語句并輸出結果的控制台。你可能需要仔細檢視應用程式的菜單，不過這些功能肯定存在于某個地方。
例如，在chromium web浏覽器中，單擊右上角的扳手圖示，下拉至工具菜單項再單擊javascript控制台。日志消息将輸出在此視窗中。圖2-1顯示了一個在chromium 浏覽器中運作的調試會話。firefox web浏覽器也有類似的功能：在“檔案”菜單中，單擊“工具”菜單，再選擇“web控制台”。ie9和opera都有各自的開發環境。你最好能夠輕松地使用這些主流浏覽器中的工具，因為為了相容各個浏覽器，你需要在所有這些浏覽器中調試代碼。如果你無法找到這個浏覽器的web開發工具，請務必檢視它們的幫助檔案。
當打開一個web開發者控制台後，可以直接在浏覽器中輸入javascript表達式并獲得計算結果，試着輸入以下代碼：
在控制台中，還可以通路dom元素以及腳本變量來檢視它們的值（確定它們處在恰當的作用域中），這樣可以友善地推算出程式運作的情況。通過這種方式，可以在将小段代碼合并到一個大程式前更好地測試與調試它們，進而盡早地發現bug！