Posted on 2012-04-15 16:37
zljpp 閱讀(126)
評論(0) 編輯 收藏
HTML5 canvas 元素詳細教程一：基本用法。
<canvas>是Html5中一個全新的元素，它可以被JavaScript語言用來繪制圖形。最先<canvas>是在蘋果公司的Mac OS X Dashboard上被引入，他被應用于Safari，而后基于Gecko1.8的瀏覽器，也支持這個新的元素，例如Firefox瀏覽器。如今，<canvas>元素已是HTML5標準規(guī)范的一部分。
<canvas>能做什么，我們都將通過本教程向大家講解，并且可以作為你應用<canvas>的起點。學習<canvas>元素并不困難，只需要具有HTML和JavaScript的基礎知識，還要Firefox瀏覽器，Safari最新版或者Opera9+,這樣才能看到所有的示例效果。
現(xiàn)在我們就從如何定義<canvas>元素開始吧。
|
<canvas id="tutorial" width="150" height="150"></canvas>
|
<canvas>元素只有兩個屬性Width和Height，這些屬性都是可選的，并且可以使用DOM或css來控制。如果不設置width和height，則使用默認的寬300像素，高150像素。雖然可以通過css來控制和調(diào)整<canvas>的大小，但是渲染圖像會進行縮放來適應布局，一旦發(fā)現(xiàn)渲染結(jié)果看上去變形，不必非要依賴css，你可以通過在<canvas>中顯示的指定width和height的值。就像標準的HTML標簽一樣，也可以定義id屬性，這樣可以使得腳本應用更加方便。<canvas>元素可以像普通圖片一樣指定其樣式（邊距，邊框，背景等等）。然而這些樣式并不會對canvas實際生成的圖像產(chǎn)生什么影響。
因為該元素相對較新，并不是所有的瀏覽器都支持該元素，所我們要為那些不能正常瀏覽的提供替用的顯示信息，它可以使用文本也可以使用圖片：
|
<canvas id="stockGraph" width="150" height="150">
您的瀏覽器不支持<canvas>元素。
</canvas>
|
|
<canvas id="clock" width="150" height="150">
<img src="images.png" width="150" height="150" alt="替換圖片"/>
</canvas>
|
在Apple Safari里，<canvas>的實現(xiàn)跟<img>很相似，它沒有結(jié)束標簽。然而，為了使<canvas> 能在web的世界里廣泛適用，需要給替用內(nèi)容提供一個容身之所，因此，在Mozilla的實現(xiàn)里結(jié)束標簽(</canvas>)是必須的。如果沒有替用內(nèi)容，<canvas id="foo" ...></canvas> 對Safari 和Mozilla 是完全兼容的——Safari 會簡單地忽略結(jié)束標簽。如果有替用內(nèi)容，那么可以用一些CSS 技巧來為并且僅為Safari 隱藏替用內(nèi)容，因為那些替用內(nèi)容是需要在IE 里顯示但不需要在Safari 里顯示。
<canvas> 創(chuàng)建的固定尺寸的繪圖畫面開放了一個或多個渲染上下文，通過它們可以來控制要顯示的內(nèi)容。我們專注于2D 渲染上，這也是目前唯一的選擇，可能在將來會添加基于OpenGL ES 的3D渲染。
|
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
|
我們來講解下上面的代碼，<canvas> 初始化是空白的，要使用腳本畫圖首先需要渲染上下文（rendering context），它可以通過canvas元素對象的getContext方法來獲取，同時得到的還有一些畫圖需要調(diào)用的函數(shù)。getContext() 接受一個用于描述其類型的值作為參數(shù)。上面第一行通過getElementById 方法取得canvas 對象的DOM 節(jié)點。然后通過其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 onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
|
細心的你會發(fā)現(xiàn)一個名為draw 的函數(shù)，它會在頁面裝載完畢之后執(zhí)行一次（通過設置body 標簽的onload 屬性），它當然也可以在setTimeout，setInterval，或者其他事件處理函數(shù)中被調(diào)用。
作為開始，來一個簡單的吧——繪制兩個交錯的矩形，其中一個是有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 onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
|