HTML5之Canvas標簽簡要學習
HTML5 提供了畫布（canvas）標簽，通過與Javascript結合使用，可以在網頁上繪制圖像。Canvas是一個矩形區域，使用Javascript可以控制其每一個像素。本文將對canvas標簽進行簡要的學習。
1、canvas標簽說明
canvas標簽是一個矩形區域，它包含兩個屬性width和height，分別表示矩形區域的寬和高，這兩個屬性都是可選的，并且都可以通過css來設定，他們的默認值是300px和150px。canvas在網頁中的形式如下：
<canvas id="myCanvas" width=”300” height=”200” style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
解析：
為canvas設置id屬性是便于Javascript調用；
第二行是當瀏覽器不支持canvas標簽時，將顯示這行文字。
2、檢測瀏覽器支持
Canvas標簽并沒有得到目前所有瀏覽器的支持，因此在使用canvas繪圖的時候，要先檢測客戶端瀏覽器是否支持。下面的示例將通過Javascript判斷瀏覽器是否支持：
<canvas id="myCanvas" width=”300” height=”200” style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
if (!myCanvas.getContext)
{
alert("Your browser does not support the canvas element.");
}
else
{
// do something here
}
</script>
解析：
上面的Javascript代碼通過判斷getContext方法是否為空來判斷瀏覽器是否支持canvas標簽。
3、繪制線條和圖案
在沒有canvas之前，想要在網頁上面繪制線條或圖案，是非常麻煩且不兼容的。我曾在《js畫直線》一文中轉載了網絡上常用的在IE和FF中繪制線條的方法，但如果想要這些方法通用，則是不可能的。但現在有了canvas標簽，一切就變得簡單了。
現在，你只需要在頁面上添加canvas標簽，并通過Javascript調用它的相應方法，就可以輕松的在頁面上繪制線條和圖案。
//繪制線條
<canvas id="myCanvas" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
if (!myCanvas.getContext)
{
alert("Your browser does not support the canvas element.");
}
else
{
var myContext = myCanvas.getContext("2d");
myContext.moveTo(200, 150);
myContext.lineTo(100, 100);
myContext.lineTo(200, 50);
myContext.strokeStyle = "#FF0000";
myContext.lineWidth = 4;
myContext.stroke();
}
</script>
解析：
顯示在頁面中放置了一個canvas標簽，設定id、width、height等屬性，并為這個標簽設定邊框。
在Javascript中檢測瀏覽器是否支持
當瀏覽器支持的時候開始調用getContext方法獲得繪圖的上下文（這地方很像vc中的GDI繪圖~~），目前只提供了2D上下文，將來還有可能支持OpenGL ES的3D上下文。
moveTo方法是將當前位置移動到指定的坐標
lineTo方法是向指定的左邊繪制直線
strokeStyle 屬性是指定線條的顏色，在本例子中指定為紅色
lineWidth 屬性設置線條的粗細，這里設置為4px
stroke方法則是將直線顯示出來。貌似是之前只是規定了哪里有線條，并沒有顯示，當調用這個方法后，線條才可以顯示。
//繪制圖案
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
if (!myCanvas.getContext)
{
alert("Your browser does not support the canvas element.");
}
else
{
var myContext = myCanvas.getContext("2d");
myContext.fillStyle = "rgb(200,0,0)";
myContext.fillRect(10, 10, 55, 50);
myContext.fillStyle = "rgba(0, 0, 200, 0.5)";
myContext.fillRect(30, 30, 55, 50);
myContext.fillRect(100, 0, 150, 50);
myContext.strokeRect(100, 60, 150, 50);
myContext.clearRect(130, 10, 90, 30);
}
</script>
解析：
直接到fillStyle屬性，之前的代碼是相同的，不再贅言。
fillStyle屬性設定了填充的顏色、透明度等，如果設置為"rgb(200,0,0)"，則表示一個顏色，不透明；如果設置 為"rgba(0,0,200,0.5)"，則表示顏色為rgb(0,0,200)，透明度為50%，
fillRect方法是繪制一個矩形，這個矩形區域沒有邊框，只有填充色。這個方法有四個參數，前兩個表示左上角的坐標位 置，第三個參數為長度，第四個參數為高度。
strokeRect方法繪制一個帶邊框的矩形。該方法的四個參數的解釋同上。
clearRect方法是清除一個矩形區域，被清除的區域將沒有任何線條。該方法的四個參數的解釋同上。
4、繪制路徑
路徑是繪制自定義圖形的好方法，在canvas中通過beginPath()方法開始繪制路徑，這個時侯你就可以繪制直線、曲線等，繪制完成后調用fill()和stroke()完成填充和設置邊框，通過closePath()方法結束路徑的繪制。下面的例子講演時如何繪制路徑：
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
if (!myCanvas.getContext)
{
alert("Your browser does not support the canvas element.");
}
else
{
var myContext = myCanvas.getContext("2d");
myContext.fillStyle = '#0000ff';
myContext.strokeStyle = '#ff0000';
myContext.lineWidth = 2;
myContext.beginPath();
myContext.moveTo(30, 30);
myContext.lineTo(150, 30);
myContext.lineTo(150, 120);
myContext.lineTo(90, 100);
myContext.lineTo(120, 60);
myContext.lineTo(30, 30);
myContext.fill();
myContext.stroke();
myContext.closePath();
}
解析：
在獲得渲染上下文后，設置了填充色、邊框色和邊框寬度。
調用beginPath()方法開始繪制路徑
通過lineTo()方法繪制一個閉合的自定義圖形
調用fill()方法進行填充
調用stroke()方法設置邊框
調用closePath()方法結束路徑的繪制
留言列表
