HTML5 學習手筆四：canvas 總結

什么是 Canvas？ 

 HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。

Canvas 對象

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

<canvas> 的歷史

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

Canvas 對象的屬性

height 屬性

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

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

Canvas 對象的方法

屬性

創建 Canvas 元素

規定元素的 id、寬度和高度： 

通過 JavaScript 來繪制

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

 JavaScript 使用 id 來尋找 canvas 元素：

 然后，創建 context 對象：

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

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

理解坐標

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

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

更多 Canvas 實例

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

實例 - 線條

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

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> 

親自試一試

實例 - 圓形

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

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> 

親自試一試

 小結：

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