<canvas>元素
讓我們從
<canvas>
元素的定義開始吧。
<canvas>看起來很像<img>,唯一不同就是它不含
src
和alt
屬性。它只有兩個屬性,width
和height,兩個都是可選的,並且都可以 DOM
或者CSS
來設置。如果不指定width 和 height,默認的是寬300像素,高150像素。雖然可以通過CSS 來調整canvas的大小,但渲染圖像會縮放來適應佈局的(如果你發現渲染結果看上去變形了,不必一味依賴CSS,可以嘗試顯式指定canvas的width
和 height 屬性值)。
id
屬性不是<canvas>
專享的,就像標準的HTLM標籤一樣,任何一個HTML元素都可以指定其 id
值。一般,爲元素指定 id
是個不錯的主意,這樣使得在腳本中應用更加方便。
<canvas>
元素可以像普通圖片一樣指定其樣式(邊距,邊框,背景等等)。然而這些樣式並不會對canvas實際生成的圖像產生什麼影響。下面我們會看到如何應用樣式。如果不指定樣式,canvas默認是全透明的。
因爲
<canvas>
相對較新,有些瀏覽器並沒實現,如Firefox 1.0 和 Internet Explorer,所以我們需要爲那些不支持canvas的瀏覽器提供替用顯示內容。
在Apple Safari裏,<canvas>
的實現跟<img>
很相似,它沒有結束標籤。然而,爲了使<canvas>
能在web的世界裏廣泛適用,需要給替用內容提供一個容身之所,因此,在Mozilla的實現裏結束標籤(</canvas>
)是必須的。
如果沒有替用內容,<canvas id="foo" ...></canvas>
對 Safari 和 Mozilla 是完全兼容的—— Safari 會簡單地忽略結束標籤。
如果有替用內容,那麼可以用一些 CSS 技巧來爲並且僅爲 Safari 隱藏替用內容,因爲那些替用內容是需要在 IE 裏顯示但不需要在 Safari 裏顯示。
<canvas>
創建的固定尺寸的繪圖畫面開放了一個或多個渲染上下文(rendering context),我們可以通過它們來控制要顯示的內容。我們專注於2D 渲染上,這也是目前唯一的選擇,可能在將來會添加基於OpenGL
ES 的 3D 上下文。
<canvas>
初始化是空白的,要在上面用腳本畫圖首先需要其渲染上下文(rendering context),它可以通過 canvas 元素對象的getContext
方法來獲取,同時得到的還有一些畫圖用的函數。getContext()
接受一個用於描述其類型的值作爲參數。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
上面第一行通過 getElementById
方法取得 canvas 對象的 DOM 節點。然後通過其 getContext
方法取得其畫圖操作上下文。除了在那些不支持 的瀏覽器上顯示替用內容,還可以通過腳本的方式來檢查瀏覽器是否支持 canvas 。方法很簡單,判斷getContext
是否存在即可。
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
我們會用下面這個最簡化的代碼模板來(後續的示例需要用到)作爲開始,你可以下載文件 到本地備用。
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body οnlοad="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
細心的你會發現我準備了一個名爲 draw
的函數,它會在頁面裝載完畢之後執行一次(通過設置body
標籤的onload
屬性),它當然也可以在setTimeout,setInterval,或者其他事件處理函數中被調用。
作爲開始,來一個簡單的吧——繪製兩個交錯的矩形,其中一個是有alpha透明效果。我們會在後面的示例中詳細的讓你瞭解它是如何運作的。
<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body οnlοad="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>