HTML5邊玩邊學（1）畫布實現方法

1、<canvas>標籤 

Html5 引入了一個新的 <canvas> 標籤，這個標籤所表明的區域就好象一塊畫布，你的全部圖形繪製最後都要在這塊畫布上呈現。有了這個標籤，瀏覽器的圖形表現力被極大的提高，Flash 和 SilverLight 有沒有感到威脅呢? 

新聞連接：Google聲稱Chrome7瀏覽器將提速60倍 

<canvas>標籤的用法很是簡單，以下

1. <canvas id="tutorial" width="150" height="150" style=""> 
2. 你的瀏覽器不支持 Canvas 標籤 
3. </canvas>

複製代碼

<canvas>標籤和普通的 HTML 標籤沒有多大的區別，你能夠設置它的寬度和高度，能夠經過 CSS 設置它的背景色、邊框樣式等等。 

你能夠在 w3cschool 找到關於 <canvas> 標籤的更多內容。 

標籤中間的內容是替換內容，若是用戶的瀏覽器不支持 <canvas> 標籤，這段內容就會被顯示出來；若是用戶的瀏覽器支持 <canvas> 標籤，則這段內容將被忽略。 

上面的 <canvas> 代碼顯示效果以下： 

你的瀏覽器不支持 Canvas 標籤 

若是你用的是IE瀏覽器，可能只能看到一個提示；若是你用的是谷歌瀏覽器或者火狐瀏覽器，你就能夠看到一個紅色的方塊區域。 
2、渲染上下文 Rendering Context 
其實光有 <canvas> 標籤咱們並不能做任何事情，玩過 Windows 編程的同窗都知道，在 Windows 裏面繪圖先要獲得一個

設備上下文 DC ,在 <canvas> 標籤上繪圖也須要先獲得一個渲染上下文，咱們的圖形並非直接畫到屏幕上的，而是先畫到

上下文(Context)上，而後再刷新到屏幕上面的。 

題外話： 爲何要整出一個「上下文」這麼複雜的概念呢？由於有了上下文對象，咱們就可讓各類不一樣的圖形設備在咱們眼裏

面看起都是一個樣，咱們只須要專一於繪圖，其餘的工做就讓操做系統和瀏覽器去操心吧，說白了就是把各式各樣的具體變成

統一的抽象，從而減輕咱們的負擔。 

獲取上下文很是簡單，只須要以下兩行代碼： 
var canvas = document.getElementById('tutorial'); 
var ctx = canvas.getContext('2d'); 

首先獲取 canvas 對象，而後調用 canvas 對象的 getContext 方法，這個方法目前只能傳入參數 "2d"，不久的未來他可能會支持參數 "3d"，你必定明白那意味着什麼，讓咱們期待吧。 
getContext 方法返回一個 CanvasRenderingContext2D 對象 ，即渲染上下文對象，你也能夠在w3cschool找到關於它的更多內容，都是一些繪圖方法。

3、瀏覽器支持 
除了在那些不支持的瀏覽器上顯示替用內容以外，咱們還能夠經過腳本的方式來檢查瀏覽器是否支持 canvas ，方法很簡單，判斷 getContext 函數是否存在便可，代碼以下： 

1. var canvas = document.getElementById('tutorial'); 
2. if (canvas.getContext){ 
3. alert("支持 <canvas> 標籤"); 
4. } else { 
5. alert("不支持 <canvas> 標籤"); 
6. }

複製代碼

4、一個小例子 

下面將用 HTML5 的繪圖功能演示一個上下移動的線條的例子， 具體的代碼將在後續內容中給出 

1. <canvas style="你的瀏覽器不支持 <canvas>標籤，請使用 Chrome 瀏覽器 或者 FireFox 瀏覽器</canvas> 
2. <script type="text/javascript">
3.         var canvas = document.getElementById('move_line');
4.         var ctx=canvas.getContext("2d");
5.         //上下移動的直線
6.         var width=400;
7.         var height=200;
8.         var y=0
9.         var dir=1;
10.         ctx.strokeStyle = "rgb(255,0,0)";
11.         
12.         function draw(){
13.             ctx.clearRect(0,0,width,height)
14.             ctx.beginPath();
15.             ctx.moveTo(0,y);
16.             ctx.lineTo(width-1,y);
17.             ctx.stroke();
18.             y=y+dir;
19.             if((y==0)||(y==(height-1))) dir=dir*(-1);
20.         }
21.         
22.     </script><p><input onclick="interval=setInterval(draw,10);" value="開始" type="button"> <input onclick="clearInterval(interval);" value="中止" type="button">