canvas遊戲開發學習之一：初識標籤

讓我們從元素的定義開始。

<canvas id="myCanvas" width="150" height="150"></canvas>

看起來很像，唯一不同就是它不含src
和alt
屬性。它只有兩個屬性，width 和 height，兩個都是可選的，都可以 用DOM 或 CSS來設定。如果不指定width 和 height，預設的是寬300像素，高150像素。雖然可以透過 CSS來調整canvas的大小，但渲染圖像會縮放來適應佈局的（如果你發現渲染結果看上去變形了，不必一味依賴CSS，可以嘗試明確指定canvas的width 和 height 屬性值）。 結束標籤是必須的。

元素可以像普通圖片一樣指定其樣式（邊距，邊框，背景等等）。然而這些樣式並不會對canvas實際產生的圖像產生什麼影響。下面我們會看到如何套用樣式。如果不指定樣式，canvas預設是全透明的。

因為
相對較新，有些瀏覽器並沒實現，例如Firefox 1.0 和 Internet Explorer，所以我們需要為那些不支援canvas的瀏覽器提供替用顯示內容。我們只需要直接在canvas元素內插入替用內容即可。不支援canvas的瀏覽器會忽略canvas元素而直接渲染替用內容，而支援的瀏覽器則會正常渲染canvas。例如，我們可以把一些文字或圖片填入canvas內，作為替用內容：

<canvas id="game" width="150" height="150">
  Oh dear, your browser dosen&#39;t support HTML5! Tell you what, why don&#39;t you upgrade to a decent browser - you won&#39;t regret it!</canvas>

<canvas id="clock" width="150" height="150">
  <imgsrc="images/clock.png" width="150" height="150"/>
</canvas>

創建的固定尺寸的繪圖畫面開放了一個或多個渲染上下文（rendering context），我們可以通過它們來控制要顯示的內容。我們專注於2D 渲染上，這也是目前唯一的選擇，可能在將來會添加基於OpenGL ES 的 3D 情境。

初始化是空白的，要在上面用腳本畫圖首先需要其渲染上下文（rendering context），它可以透過 canvas 元素物件的getContext
方法來獲取，同時得到的還有一些畫圖用的函數。 getContext()
接受一個用來描述其類型的值作為參數。 getContext()傳回一個CanvasRenderingContext2D物件。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

上面第一行透過 getElementById方法取得 canvas 物件的 DOM 節點。然後透過其getContext
方法取得其畫圖操作上下文。

除了在那些不支援 的瀏覽器上顯示替用內容，還可以透過腳本的方式來檢查瀏覽器是否支援 canvas 。方法很簡單，判斷getContext
是否存在即可。

var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

我們會用下面這個最簡化的程式碼模板來（後續的範例需要用到）作為開始。

  
    
    
    
  
  
    <canvas id="myCanvas" width="150" height="150"></canvas>
  

細心的你會發現我準備了一個名為draw
的函數，它會在頁面裝載完畢之後執行一次（透過設定body標籤的onload屬性），它當然也可以在其他事件處理函數中被調用。

以上就是canvas遊戲開發學習之一：初識標籤的內容，更多相關內容請關注PHP中文網（www.php.cn）！