《HTML5 Canvas開發詳解》——導讀

https://yqfile.alicdn.com/bc81e95aba389209ecb7176965c56b0ba2d9c780.png" >

前言

html5 canvas為開發者提供了一個新的機會，利用它僅使用普通的html和javascript語言就可以在常見的浏覽器中建立動畫圖形。canvas是html5中使用率最高的一部分，它被用于許多示範與遊戲。它提供了視覺效果很棒的互動特性，而且它還提供了非常大的自由度，幾乎允許開發者在浏覽器視窗中做任何事情。然而它與javascript的傳統開發方式不同（與flash和silverlight的開發也不同），是以需要仔細進行探索。

如何運作本書中的示例

使用html5和canvas程式設計最大的好處就是進入的門檻非常低——需要的所有工具就是一個現代浏覽器和一個文本編輯器。

為了得到最大相容性，本書建議讀者下載下傳或使用下列最新版本的浏覽器，并且排名越前優先級越高。

1．chrome

2．safari

3．opera

4．firefox

5．internet explorer（ie9或更高版本）

本書中的每一個示例都在google chrome、safari和opera中測試過。在後期開發的示例代碼中，firefox中開始出現一些問題。本書已經盡最大努力確定這些示例可以相容盡可能多的浏覽器，不過這裡依然推薦讀者使用google chrome或safari浏覽器，這樣在canvas獲得更多的支援度之前得到最好的效果。

請注意，如果讀者使用本書的pdf版本複制粘貼代碼，那麼許多語句中包含的減号（“-”）會被替換為其他字元，例如連字元。讀者可以将這些其他符号替換為減号（“-”），這樣代碼才能正常工作。

本書建議購買了本書電子版的讀者應該僅将書中的代碼作為一個參考指南，并且從本書的網站中下載下傳完成的代碼。在下載下傳檔案中除了代碼，還包括所有的圖像檔案、二進制檔案以及可以讓示例在浏覽器中正常運作的其他資源。

[第1章 html5 canvas簡介

<a href="https://yq.aliyun.com/articles/97057">1.2　本書中使用的基礎html頁面</a>

<a href="https://yq.aliyun.com/articles/97059">1.3　文檔對象模型（dom）和canvas</a>

<a href="https://yq.aliyun.com/articles/97063">1.4　javascript和canvas</a>

<a href="https://yq.aliyun.com/articles/97072">1.5　html5 canvas版“hello world！”</a>

<a href="https://yq.aliyun.com/articles/97077">1.6　用console.log調試</a>

<a href="https://yq.aliyun.com/articles/97081">1.7　2d上下文及其目前狀态</a>

<a href="https://yq.aliyun.com/articles/97081">1.8　html5 canvas對象</a>

<a href="https://yq.aliyun.com/articles/97101">1.9　第二個示例：猜字母</a>

<a href="https://yq.aliyun.com/articles/97105">1.10　内容預告</a>

[第2章 在canvas上繪圖

<a href="https://yq.aliyun.com/articles/97117">2.2　基本矩形</a>

<a href="https://yq.aliyun.com/articles/97121">2.3　canvas狀态</a>

<a href="https://yq.aliyun.com/articles/97131">2.4　使用路徑建立線段</a>

<a href="https://yq.aliyun.com/articles/97144">2.5　進階路徑方法</a>

<a href="https://yq.aliyun.com/articles/97152">2.6　在畫布上合成</a>

<a href="https://yq.aliyun.com/articles/97167">2.7　簡單畫布變換</a>

<a href="https://yq.aliyun.com/articles/97182">2.8　用顔色和漸變填充對象</a>

<a href="https://yq.aliyun.com/articles/97262">2.9　用圖案填充形狀</a>

<a href="https://yq.aliyun.com/articles/97269">2.10　建立陰影</a>

<a href="https://yq.aliyun.com/articles/97271">2.11　内容預告</a>

第3章　html5 canvas的文本api

第4章　canvas圖像

第5章　數學、實體與動畫

第6章　在畫布中融合html5視訊

第7章　使用音頻

第8章　畫布遊戲本質

第9章　位圖與聲音的結合

第10章　使用phonegap制作移動裝置遊戲

第11章　進一步探索