《HTML5 canvas開發詳解（第2版）》——第1章 HTML5 Canvas簡介1.1 什麼是HTML5

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

html5是新一代的html，即超文本标記語言。html從1993年第一次标準化後，便奠定了網際網路的基礎。html通過使用将标簽用尖括号（< >）括起來的方式定義web頁面内容。

html5 canvas是螢幕上的一個由javascript控制的即時模式位圖區域。即時模式是指在畫布上呈現像素的方式，html canvas通過javascript調用canvas api，在每一幀中完全重繪螢幕上的位圖。作為一名程式員，所要做的就是在每一幀渲染之前設定螢幕的顯示内容，這樣才能顯示正确的像素。

這使得html5 canvas與在保留模式下運作的flash、silverlight或svg有很大的差別。在保留模式下，對象顯示清單由圖形渲染器儲存，通過在代碼中設定屬性（例如，x坐标、y坐标和對象的alpha透明度）控制展示在螢幕上的對象。這使得程式員可以遠離底層操作，但是它弱化了對位圖螢幕最終渲染效果的控制。

基本的html5 canvas api包括一個2d環境，允許程式員繪制各種圖形和渲染文本，并且将圖像直接顯示在浏覽器視窗定義的區域。讀者可以對畫布上放置的的圖形、文本和圖像應用顔色、旋轉、漸變色填充、alpha透明度、像素處理等，并且可以使用各種直線、曲線、邊框、底紋來增強其效果。

就其本身而言，html5 canvas 2d環境是一個用來在位圖區域渲染圖形顯示的api，但人們很少使用該技術在這個環境中建立應用程式。通過跨浏覽器相容的javascript語言可以調用鍵盤滑鼠輸入、定時器間隔、事件、對象、類、聲音、數學函數等功能，希望讀者能夠學會并使用html5 canvas建立優質的動畫、應用程式和遊戲。

本書将深入解讀canvas api。在此過程中，本書将展示如何使用canvas api來建立應用程式。本書中的很多技術已經被成功應用于其他平台，現在，本書要将它們應用到html5 canvas這個令人興奮的新技術上來。

支援html5 canvas的浏覽器

除了ie 8以外，很多新版本的浏覽器都支援html5 canvas。幾乎每天都會支援新的特性。支援最好的應該是google chrome，緊接着是safari、internet explorer 10、firefox、opera。本書将利用名為modernizr.js的javascript庫來幫助判斷各個浏覽器支援哪些canvas特性。

最近html5的定義已經發生了轉變，當作者在2010年編寫本書第一版的時候，w3c的html5規範是一個獨特的單元，它涵蓋了有限的功能集合，其中包括了諸如新的html标簽（< video >、< audio >和< canvas >）之類的東西。然而，在過去的一年中，這一定義已經發生了改變。

那麼，究竟什麼是html5？在w3c html5的常見問題中，關于html5是這樣說明的：html5是一個開放的平台下開發的免費許可條款。

術語html5會被人們使用在以下兩個方面。

指一組共同構成了未來開放式網絡平台的技術。

這些技術包括html5規範、css3、svg、mathml、地理位置、xmlhttprequest、context 2d、web字型以及其他技術。這一套技術的邊界是非正式的，且随時間變化的。

指html5規範，當然也是開放式網絡平台的一部分。

在過去的幾個月裡，我們通過交談和項目工作了解到的是：普通人（或者說那些急着要完成項目的客戶）誰也不會嚴格遵守上述定義，這些都是html5。是以，當有人說起“html5”的時候，他們實際上指的是“開放式網絡平台”。

當人們提及“開放式網絡平台”時，有一件可以确定的事是，這份邀請名單中一定不能漏掉adobe flash。

html5是什麼？總之，它不是flash（也不是其他類似的技術）。html5 canvas是最有能力在網絡和移動網際網路上取代flash功能的最好的技術。這本書将帶領讀者學習如何開始使用html5 canvas。