《HTML5遊戲程式設計核心技術與實戰》——第2章 Canvas繪圖

本節書摘來自異步社群《html5遊戲程式設計核心技術與實戰》一書中的第2章，第2.1節,作者： 向峰 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

首先，我們需要學習的是html5中的canvas元素，canvas元素是html5中一個非常重要的元素，也是實作遊戲的核心，canvas元素的誕生為html5能夠支援較高性能的動畫和遊戲提供了可行性。html4中，如果要完成類似畫闆和遊戲的功能，需要使用flash，但flash需要在浏覽器中安裝flash插件才能提供相應功能。本章圍繞canvas元素講解以下幾個主要内容（對于非常熟悉本章内容的讀者可略過本章）：

基本知識；

圖形api；

圖像api；

文本api；

坐标變換。

在html4時代，不安裝插件的情況下，基于浏覽器的繪圖元件是最初由微軟向w3c遞交的vml（vector markup language矢量标記語言）技術，但未被w3c采納，隻能在ie5.0及其後續版本中使用，後來vml和pgml（由adobe和sun提出）合并成svg（scalable vector graphics，可伸縮矢量圖形）規範。svg技術是基于xml的矢量圖形繪制技術，對于普通的圖像應用來說足夠，但是對于性能要求較高的遊戲渲染來說，svg支援還不夠，而且svg也無法支援像素級别的操作，不能直接使用硬體加速機制，是以，需要有一個更适合遊戲運作的高效的元件，這就是canvas元件。

在所有的桌面應用程式的開發平台中，幾乎都有canvas元件，canvas元件幾乎成了繪圖元件的代名詞。在基于浏覽器的應用開發中，canvas元素最初是由蘋果在自己的mac os x webkit中推出，供應用程式和safari浏覽器使用。後來，w3c建議在下一代網絡技術中加入該元素以适應新的技術要求，目前幾乎所有的浏覽器都提供了對canvas的支援。

canvas元素本質上是在浏覽器中提供了一塊可繪制的區域，javascript代碼可以通路該區域，通過一套完整的api進行二維圖像繪制。另外，如果顯示卡硬體支援3d圖形功能，還可以使用canvas繪制3d圖形。下面我們看看canvas的使用。

2.1.1 建立canvas

首先，我們來看如何在html5中使用canvas元素，使用canvas标簽的代碼如下：

以上代碼建立了一個id為can的canvas，canvas的寬度為800，高度為600。需要注意的是，建立的canvas在浏覽器中看不到，因為它預設是透明的。另外，canvas比較特殊，我們最好不要用css樣式定義寬度和高度，直接使用width和height定義就好，預設情況下canvas的width是300，height是150。需要注意的是，canvas的結束标簽是必需的，當浏覽器不支援canvas元素時，canvas标簽中間的文字就會顯示出來。

2.1.2 了解canvas坐标系

加入了canvas元素之後，我們就可以通過javascript，使用canvas元素提供的api操作canvas，在canvas上繪圖。在繪圖之前，我們需要了解canvas元素的坐标系，canvas的坐标系如圖2-1所示。

可以看出，對于canvas來說，它的坐标系是以左上角為原點，向右延伸是x橫坐标正方向，向下延伸是y縱坐标正方向，是以原點的坐标是(x,y)=(0,0)。弄清楚坐标系對于以後使用canvas的api意義重大，在繪圖的時候需要時刻記住坐标空間。

2.1.3 擷取canvas環境上下文

在定義好了canvas之後，我們就可以使用javascript通路canvas元素，使用canvas提供的一系列api。在使用canvas的時候，首先要得到canvas的環境上下文，有了canvas的環境上下文，才能夠對canvas進行相應操作，可以通過以下方式擷取環境上下文:

使用canvas元素的getcontext ("2d")的方式可以擷取到2d圖像操作的環境上下文，如果擷取的context為空，表示該浏覽器不支援canvas。有了context變量後就可以在canvaselement元素上進行2維圖像操作，另外可以通過getcontext ("webgl")擷取webgl環境上下文進行3維圖像操作。