HTML5 學(xué)習(xí)手筆四：canvas 總結(jié)

什么是 Canvas？ 

 HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。

Canvas 對象

<canvas> 標(biāo)記在 Safari 1.3 中引入，在制作此參考頁時，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas> 標(biāo)記及其 API 可以使用位于 excanvas.sourceforge.net 的 ExplorerCanvas 開源項目來模擬。 

<canvas> 的歷史

<canvas> 的標(biāo)準化的努力由一個 Web 瀏覽器廠商的非正式協(xié)會在推進，目前 <canvas> 已經(jīng)成為 HTML 5 草案中一個正式的標(biāo)簽。 參見：http://www.whatwg.org/specs/web-apps/current-work/ 

Canvas 對象的屬性

height 屬性

畫布的高度。和一幅圖像一樣，這個屬性可以指定為一個整數(shù)像素值或者是窗口高度的百分比。當(dāng)這個值改變的時候，在該畫布上已經(jīng)完成的任何繪圖都會擦除掉。默認值是 300。

畫布的寬度。和一幅圖像一樣，這個屬性可以指定為一個整數(shù)像素值或者是窗口寬度的百分比。當(dāng)這個值改變的時候，在該畫布上已經(jīng)完成的任何繪圖都會擦除掉。默認值是 300。

Canvas 對象的方法

屬性

創(chuàng)建 Canvas 元素

規(guī)定元素的 id、寬度和高度： 

通過 JavaScript 來繪制

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成： 

 JavaScript 使用 id 來尋找 canvas 元素：

 然后，創(chuàng)建 context 對象：

下面的兩行代碼繪制一個紅色的矩形： 

 fillStyle 方法將其染成紅色，fillRect 方法規(guī)定了形狀、位置和尺寸。

理解坐標(biāo)

如下圖所示，畫布的 X 和 Y 坐標(biāo)用于在畫布上對繪畫進行定位。

包括前幾篇DEMO都涉及了大量的坐標(biāo)，那這些坐標(biāo)是如何準備得到的呢，我們實際開發(fā)如何得到我們想要的坐標(biāo)點?下面給出一個獲取canvas坐標(biāo)點的DEMO：

更多 Canvas 實例

下面的在 canvas 元素上進行繪畫的更多實例：

實例 - 線條

通過指定從何處開始，在何處結(jié)束，來繪制一條線：

JavaScript 代碼：

<script type="text/javascript">
var c=document.getElementById("myCanvas"); 
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();  
</script> 

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element.
</canvas> 

親自試一試

實例 - 圓形

通過規(guī)定尺寸、顏色和位置，來繪制一個圓：

JavaScript 代碼：

<script type="text/javascript">  
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d"); 
cxt.fillStyle="#FF0000"; 
cxt.beginPath(); 
cxt.arc(70,18,15,0,Math.PI*2,true); 
cxt.closePath(); cxt.fill();  
</script> 

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> 

親自試一試

實例 - 漸變

使用您指定的顏色來繪制漸變背景：

JavaScript 代碼：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd; cxt.fillRect(0,0,175,50);
</script> 

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> 

親自試一試

實例 - 圖像

把一幅圖像放置到畫布上：

JavaScript 代碼：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="flower.png";
cxt.drawImage(img,0,0);
</script> 

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> 

親自試一試

 小結(jié)：

通過幾篇對Canvas API的學(xué)習(xí)，知道它的強大和方便，雖然這只是涉及到它使用的一些基本知識，關(guān)于canvas 的使用一本書可能還說不完，只能算是拋個磚引個玉吧。在以后用到的時候通過積累慢慢熟悉它。相信它是以后網(wǎng)頁游戲發(fā)展的一個新趨勢。