《HTML5 Canvas開發詳解》——1.5 HTML5 Canvas版“Hello World！”

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

如前所述，将canvas放入html5頁面時第一件要做的事，就是看看整個頁面是否已經加載，并且開始操作前是否所有html元素都已展現。用canvas處理圖像和聲音的時候這點會非常重要。

為此，這裡要使用javascript的事件。當定義的事件發生時，事件從對象發出。其他對象監聽事件，這樣就可以基于事件進行處理。用javascript可以監聽對象的一些常見事件，包括鍵盤輸入、滑鼠移動以及加載結束。

第一個需要監聽的事件是window對象的load事件。該事件在html頁面加載結束時發生。

要為事件添加一個監聽器，可以使用dom的對象的addeventlistener()方法。因為window代表html頁面，是以它是最進階别的dom對象。

addeventlistener()函數接受以下3個參數。

事件：load

這是監聽器的事件名稱。對于諸如window的已有對象的事件已經預先定義過。

事件處理器函數：eventwindowloaded()

當事件發生時調用這個函數。在代碼中會調用canvasapp()函數來開始執行主應用程式。

usecapture：true或false

這個參數設定函數是否在事件傳遞到dom對象樹的底層對象之前捕捉此種類型的事件。此處始終設為false。

下面是用來測試window是否加載完畢的最終代碼。

另外，也可以用許多其他方式為load事件設定事件監聽器。

或者使用如下代碼。

本書使用第一種方法。

1.5.1　為canvas封裝javascript代碼

前面已經建立了一種測試html頁面是否加載完畢的方法，下面将開始建立javascript應用程式。因為javascript在html頁面中運作，是以它可以與其他javascript應用程式和代碼一起運作。通常，這不會導緻什麼問題。但是，可能會出現一種情況，即代碼中的變量或者函數會與html頁面中的其他javascript代碼産生沖突。

canvas應用程式與在浏覽器中運作的其他應用有所不同，由于canvas隻在螢幕上特定的區域執行顯示結果，它的功能可以說是獨占的，是以不太會受到頁面上的其他内容影響，反之亦然。讀者可能還想在同一個頁面上放置多個canvas應用，那麼在定義javascript代碼時必須将對應的代碼分開。

為避免這個問題，可以将變量和函數都封裝在另一個函數中。javascript函數本身就是對象，javascript對象既可以有屬性也可以有方法。将一個函數放到另一個函數中，讀者可以使第二個函數隻在第一個函數的局部作用域中。

在示例中将使從window load事件中調用的canvasapp()函數包含整個canvas應用程式。 “hello world!”示例中将會有一個名為drawscreen()的函數。一旦canvasapp()被調用，則立即調用drawscreen()來繪制“hello world!”文本。

drawscreen()函數現在是canvasapp()的局部函數。在canvasapp()中建立的任何變量或函數對于drawscreen()來說都是局部的。但是對于html頁面的其餘部分或其他可能運作的javascript應用程式來說并非如此。

以下是如何封裝函數的示例代碼，也是canvas應用程式的代碼。

1.5.2　将canvas添加到html頁面中

在html的< body > 部分添加一個< canvas > 标簽時，可以參考以下代碼。

現在，小結一下正在讨論的内容。< canvas > 标簽有3個主要屬性。在html中，屬性被設在尖括号括起來的html标簽中。這3個屬性分别如下。

id：id在javascript代碼中用來訓示特定< canvas > 标簽的名字，如canvasone。

width：畫布寬度，以像素為機關。width将設為500像素。

height：畫布高度，以像素為機關。height将設為300像素。

提示：

html5元素（包括canvas）還有很多屬性，如tabindex, title, class, accesskey, dir, draggable, hidden等。

在開始标簽< canvas > 和結束标簽< /canvas > 中間，可以添加文本，如果浏覽器執行html頁面不支援canvas時會顯示這些文字。以本章的canvas應用程式為例，這裡将使用文本“your browser does not support html5 canvas，”（你的浏覽器不支援html5 canvas）。實際上此處可以放置任意文字。

在javascript中使用document對象引用canvas元素

接下來用dom引用html中定義的< canvas > 标簽。document對象加載後可以引用html頁面的任何元素。

這裡需要一個canvas對象的引用，這樣就能夠知道當javascript調用canvas api時其結果在哪裡顯示。

首先定義一個名為thecanvas的新變量，用來儲存canvas對象的引用。

接下來，通過調用document的getelementbyid()函數得到canvasone的引用，canvasone是在html頁面中為建立的< canvas > 标簽定義的名字。

var thecanvas = document.getelementbyid("canvasone");

1.5.3　檢測浏覽器是否支援canvas

現在已經得到了html頁面上定義的canvas元素的引用，下面就需要檢測它是否包含上下文。canvas上下文是指支援canvas的浏覽器定義的繪圖界面。簡單地說，如果上下文不存在，畫布也不會存在。有多種方式可以對此進行驗證。由于前面已經在html頁面中定義了canvas，第一種方式是在調用canvas的getcontext方法之前，檢測canvas對象以及getcontext方法是否存在。

實際上，這段代碼測試了兩件事。第一，它測試thecanvas是否包含false（如果命名的id不存在，document.getelementbyid()将傳回此值）。第二，它測試getcontext()函數是否存在。

如果測試失敗，return語句将中斷程式執行。

另一個方法是建立一個函數，在其中建立一個虛拟畫布，以此來檢測浏覽器是否支援。這個方法是由mark pilgrim在他的html5網站建立并流行起來的。

作者最喜歡的方法是使用modernizr.js庫。modernizr是一個易用并且輕量級的庫，可以檢測各種web技術的支援情況。modernizr建立了一組靜态的布爾值，可以檢測是否支援canvas。

為了檢測是否支援canvas，将canvassupport()函數改成下面這樣。

這裡将要使用modernizr.js方法，因為它提供了測試web浏覽器是否支援canvas的最佳途徑。

1.5.4　獲得2d上下文

最後需要得到2d上下文的引用才能夠操作它。html5 canvas被設計為可以與多個上下文工作，包含一個建議的3d上下文。不過，本書隻需得到2d上下文。

1.5.5　drawscreen()函數

現在便可以建立實際的canvas api代碼了。在canvas上運作的各種操作都要通過context對象，因為它引用了html頁面上的對象。

在後面幾章中，本書将深入講解在html5 canvas中繪制文本、圖形和圖像等内容，是以現在隻需花一點點時間來看drawscreen()函數的代碼。

這裡說的“螢幕”實際上就是定義的畫布繪圖區域，而不是整個浏覽器視窗。作者之是以将它稱之為螢幕，是因為在編寫遊戲或應用程式時，它就是在操作畫布時的顯示視窗或螢幕。

首先要做的事情是清空繪圖區域。下面的兩行代碼在螢幕上繪制出一個與畫布大小相同的黃色方塊。fillstyle()設定了顔色，fillrect()建立了一個矩形，并把它放到螢幕上。

注意，這裡調用了context的函數。沒有螢幕對象，顔色對象或者其他對象。這就是之前描述的即時模式的示例。

下一章将讨論canvas的文本函數，這裡隻是簡單地浏覽将“hello world!”文本放到螢幕上的代碼。

首先，使用與設定矩形顔色相同的方法設定文本的顔色。

然後設定字型大小和字号。

接下來設定字型的垂直對齊方式。

最後通過調用context對象的filltext()方法将測試文本顯示到螢幕上。這個方法的3個參數分别是是文本字元串、x坐标和y坐标。

下面可以給 “hello world!”文本添加圖形。首先，加載一個圖像并将它顯示出來。第4章将深入讨論圖像及其操作，現在僅僅要做的就是顯示一個圖像到螢幕上。為了将圖像顯示到畫布上，需要建立一個image()對象的執行個體，并且将image.src屬性設為将要加載的圖像的名字。

讀者也可以将其他畫布或者視訊當作圖像顯示出來。本書會在第4章和第6章讨論相關主題。

在顯示圖像之前，需要等待圖像加載完畢。設定image對象的onload函數可以為image load事件建立一個callback()函數。callback()函數将在onload事件發生時被執行。當圖像加載完畢，可以調用context.drawimage()并傳輸3個參數将圖像顯示到畫布上：image對象、x坐标以及y坐标。

最後圍繞文本和圖像繪制一個方塊。為了繪制方塊而不填充，可以使用context.strokestyle()方法設定方塊邊框的顔色，然後調用context.strokerect()方法繪制矩形邊框。strokerect()的4個參數分别是：左上角的x坐标和y坐标，以及右下角的x坐标和y坐标。

完整的html5 hello world! 應用程式代碼如例1-3所示，結果如圖1-3所示。