《HTML5 Canvas開發詳解》——1.4 JavaScript和Canvas

本節書摘來自異步社群《html5 canvas開發詳解》一書中的第1章，第1.4節,作者： 【美】steve fulton , jeff fulton 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

javascript是用來建立canvas應用程式的一種程式設計語言，能在現有的任何web浏覽器中運作。如果需要重溫javascript，請關注douglas crockford的書《javascript: the good parts》(o’reilly)，這本書很流行并且有很強的參考價值。

1.4.1　javascript架構和庫

目前有很多流行的javascript架構，例如jquery、processing.js等，可以幫助開發者提高javascript的開發效率。這些架構有望于在6～12個月内就為canvas提供更好的支援。在此期間，這裡将重點放在直接用javascript來控制畫布。然而，在适當的地方也會介紹這些架構和javascript庫，例如modernizr、jscolor以及webgl，以幫助讀者更高效地開發。

1.4.2　javascript放置的位置及其理由

既然使用javascript為canvas程式設計，這就産生了一個問題：在建立的頁面中，從哪裡啟動javascript程式呢？

把javascript放進html頁面的 < head > 标簽中是個不錯的主意，好處是很容易找到它。但是，把javascript程式放在這裡就意味着整個html頁面加載完畢javascrpit才能配合html運作，這段javascript代碼也會在整個頁面加載前就開始執行了。結果就是，運作javascript程式之前必須檢查html頁面是否已經加載完畢。

最近有一個趨勢是将javascript放在html文檔結尾處的< /body >标簽裡，這樣就可以確定在javascript運作時整個頁面已經加載完畢。然而，由于在運作< canvas >程式前需要使用javascript測試頁面是否加載，最好還是将javascript放在< head >中。如果讀者不喜歡這樣，也可以采用适合自己的代碼習慣。

代碼放在哪兒都行，可以放在html頁面代碼行内，或者加載一個外部 .js檔案。加載外部javascript檔案的代碼大緻如下。

簡單起見，這裡将把代碼寫在html頁面行内。不過，如果讀者已掌握，把它放在一個外部檔案再加載運作也未嘗不可。

提示：

html5不需要再指定腳本類型。