Canvas基礎知識(一)

canvas是Html5新增的標籤，是個圖形容器。容許JavaScript在其區域內進行繪製。其它大小由width和height決定。

canvas的建立

<canvas id="canvas" width=800; height=600></canvas>;
canvas標籤只有width和height兩個屬性，在沒有設置它們的狀況下，canvas默認大小爲300X150。同時，若是用css來設置canvas的大小會出問題，推薦直接在canvas標籤裏設置大小或者經過JavaScript來設置大小。

canvas能作什麼？

• 動畫
• 圖形
• 遊戲
• 字體

得到上下文

canvas只有得到上下文以後，才能在它的上面繪畫。getContext()方法就是來獲取上下文和繪畫功能的。getContext()只有一個參數，就是上下文的格式。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

清空畫布的方法

1.重設canvas的高度或者寬度：
因爲canvas每當高度或寬度被重設時，畫布內容就會被清空，所以能夠用如下方法清空

function clearCanvas(){
    var canvas = document.getElementById("canvas");
    canvas.height=canvas.height;
    }

2.使用clearRect方法：

function clearCanvas(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvas.width,canvas.height);
    }

3.能夠用某一特定的顏色填充畫布，從而到達清空的目的：

function clearCanvas()  
{  
    var canvas=document.getElementById("Canvas");  
    var ctx= canvas.getContext("2d");  
      
    cxt.fillStyle="#000000";  
    cxt.beginPath();  
    cxt.fillRect(0,0,c.width,c.height);  
    cxt.closePath();  
}

檢查瀏覽器是否支持

最新版的 FireFox，Safari，Chrome 和 Opera 都支持 HTML5 canvas，可是 IE8及如下都不支持canvas。下面的代碼用於檢測瀏覽器的是否支持canvas
var canvas = document.getElementById("canvas");
if (canvas.getContext){

var ctx = canvas.getContext('2d');
// 支持

} else {

// 不支持

}