HTML5 學習手筆四：canvas 總結

什么是 Canvas？ 

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

畫布是一個矩形區域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法

Canvas 對象

Canvas 對象表示一個 HTML 畫布元素 - <canvas>。它沒有自己的行為，但是定義了一個 API 支持腳本化客戶端繪圖操作。

你可以直接在該對象上指定寬度和高度，但是，其大多數功能都可以通過 CanvasRenderingContext2D 對象獲得。 這是通過 Canvas 對象的 getContext() 方法並且把直接量字符串 "2d" 作為唯一的參數傳遞給它而獲得的。

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

 

<canvas> 的歷史

這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。

<canvas> 標記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對 HTML 的這一根本擴展的原因在於，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 組件所使用，並且 Apple 希望有一種方式在 Dashboard 中支持腳本化的圖形。

Firefox 1.5 和 Opera 9 都跟隨了 Safari 的引領。這兩個瀏覽器都支持 <canvas> 標記。

我們甚至可以在 IE 中使用 <canvas> 標記，並在 IE 的 VML 支持的基礎上用開源的 JavaScript 代碼（由 Google 發起）來構建兼容性的畫布。 參見：http://excanvas.sourceforge.net/。

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

Canvas 對象的屬性

height 屬性

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

width 屬性

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

Canvas 對象的方法

方法	描述
getContext()	返回一個用於在畫布上繪圖的環境。

 

 

屬性

屬性	值	描述
height	pixels	設置 canvas 的高度。
width	pixels	設置 canvas 的寬度。

創建 Canvas 元素

向 HTML5 頁面添加 canvas 元素。

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

 

<canvas id="myCanvas" width="200" height="100"></canvas>

 

 

通過 JavaScript 來繪制

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

           <script type="text/javascript">   
          
 
          var c=document.getElementById("myCanvas"); 
          
 
          var cxt=c.getContext("2d"); 
          
 cxt.fillStyle="#FF0000"; 
          
 cxt.fillRect(0,0,150,75); 
          
 </script> 
         

 

 JavaScript 使用 id 來尋找 canvas 元素：

 

var c=document.getElementById("myCanvas");

 

 然后，創建 context 對象：

 

var cxt=c.getContext("2d");

 

 

getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

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

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);  

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

 

 

理解坐標

上面的 fillRect 方法擁有參數 (0,0,150,75)。

意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。

如下圖所示，畫布的 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 的使用一本書可能還說不完，只能算是拋個磚引個玉吧。在以后用到的時候通過積累慢慢熟悉它。相信它是以后網頁游戲發展的一個新趨勢。