萬盛學電腦網 >> 網頁制作 >> Html5 >> HTML5新元素–Canvas
HTML5新元素–Canvas
基本特性
<canvas>是HTML5裡面定義的一個新元素，你能夠在此元素裡繪畫、嵌入圖片並使用javaScript腳本產生一段動畫。
<canvas>首次在Mac OS X中的Dashboard中被引入，之後又被蘋果公司的Safari浏覽器所支持，采用Gecko1.8+引擎的浏覽器都支持此標簽（譯注：Safari及Chrome采用的Webkit引擎也支持此標簽），在W3C標准中，<canvas>元素做為Web application 1.0標准的一部分被引入——同時，我們也稱其為HTML5 。
本文檔旨在指導你如何在你的HTML文檔中使用<canvas>元素，並提供一些簡明的實例以助您更好的理解它。
准備工作
在使用<canvas>之前，你需要了解一些基本的HTML及Javascript知識。
並且，請確保你使用的浏覽器能正確的支持<canvas>標簽，我們向你推薦Firefox 1.5+/Opera 9/Safari 3+/Chrome，無論如何，請不要在IE上調試包含<canvas>標簽的代碼。
--------------------------------------------------------------------------------
Hello，canvas
示例代碼：
<canvas id="tutorial" width="150" height="150"></canvas>它看起來很像<img>標簽，不同的是它沒有src和alt屬性，它的height和width屬性是可選的，你也可以在CSS屬性裡對其指定高寬度，但這樣做的話，其內部繪入的圖像可能因為縮放大小而扭曲，所以，如果你在<canvas>中繪入的圖像看起來似乎有點不一樣，請嘗試在CSS屬性裡去掉高寬度，而在其HTML屬性中指定。當你沒有給<canvas>指定高寬度時，它將具有默認的寬度300px，高度150px的屬性。（譯注：經在Chrome和Safari中測試，不給高寬度時它們都把<canvas>渲染為300×150px大小，所以，這應該是W3C的一個指導標准，而非Firefox的私有特性。）
如同絕大多數HTML標簽，你也可以為其指定一個id屬性來對它與其它元素進行區分。
<canvas>的表現看起來如同一個普通<img>標簽（它也具有margin，border，background等），但這些屬性不會影響到最終的繪畫輸出，本文後部的示例將有助你理解這一點。而如果沒有為其定義任何屬性的話，<canvas>看起來就如同一個透明的gif。
平穩退化
因為<canvas>還是一個較新的標簽，所以在一些老的浏覽器中它並不能被正常解析（譯注：例如Firefox 1.5和全系列的IE——是的，包括IE8），我們需要做一些工作來平穩退化到這些老的浏覽器——這非常簡單，老的浏覽器不支持<canvas>標簽，它們將其忽略掉，而接著解析接下來的內容，這樣，我們只需要<canvas>內提供一些替代的內容，如一些文字或者圖片，這樣，支持<canvas>的浏覽器將忽略<canvas>內部的內容，而老的浏覽器將忽略<canvas>，各取所需，皆大歡喜。
代碼示例：
<canvas id="stockGraph" width="150" height="150"> //支持canvas的浏覽器解析它
current stock PRice: $3.15 +0.15 //不支持canvas的浏覽器解析它
</canvas>
<canvas id="clock" width="150" height="150"> //同上
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>必要的</canvas>結尾
在Safari中，<canvas>就像<img>標簽一樣被對待，所以</canvas>結尾不是必需的，然而在一些老版本的Firefox上，</canvas>是必需的，正確的寫法是讓<canvas></canvas>成對的出現。
渲染方式
<canvas>在浏覽器中創建一個固定大小的具有一層或多層結構的平面（譯注：你可以理解為N片大小相同的玻璃並在一起，你可以在每一片玻璃上畫畫），目前<canvas>可用的一些繪圖方式都是基於2D平面的，在未來，也許<canvas>可以增加一些3D的繪圖方式，比如基於OpenGL ES的一些新特性。
浏覽器剛載入<canvas>時，它裡面是空白的，接下來你可以利用javaScript腳本為其增加背景圖片，或是在其上繪畫。<canvas>有一個標准的DOM方法：getContext ，用於引用<canvas>內部的內容。getContext()有一個參數，用於指定其繪圖的類型（2D或3D）。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');檢查浏覽器是否支持
在上面的“平穩退化”部分我們在HTML中為不支持<canvas>的浏覽器准備了一部分不同的內容，同樣，在javaScript中，我們也可以通過檢查getContext方法，來確定浏覽器是否支持<canvas>，代碼如下：
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// 為支持getContext的浏覽器准備的內容
} else {
// 為不支持getContext的浏覽器准備的內容
}一個基本的框架
下面是一個基本的使用<canvas>的框架代碼，接下來幾章的一些實例我們將用到它，建議你下載此文件到你的計算機。
<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 onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>一個簡單的實例
接下來我們以一個簡單的實例結束此章：我們在<canvas>中繪入兩個矩形，其中一個具有50%的透明度。
查看此例
<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)";//rgba分別對應red,green,blue,alpha
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
- 上一頁:Html5新標簽的使用
- 下一頁:HTML5新元素–Canvas
