定義和用法
1.<canvas>只是圖形容器 ，可定義圖形，比如圖表和其他圖像，須使用腳本來繪制圖形。2.<canvas> 標記和 SVG 以及 VML 之間的差異
<canvas> 標記和 SVG 以及 VML 之間的一個重要的不同是，<canvas> 有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。
這兩種方式在功能上是等同的，任何一種都可以用另一種來模擬。從表面上看，它們很不相同，可是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。
要從同一圖形的一個<canvas> 標記中移除元素，往往需要擦掉繪圖重新繪制它。
下面通過幾個例子來更直觀地感受一下canvas
1.通過 canvas 元素來顯示一個紅色的矩形：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="600" height="600">
yourbrowser does not support the canvas tag
</canvas> //之后畫圓等例子，用的都是這個canvas
<script type="text/javascript">
varcanvas=document.getElementById('myCanvas'); //先獲取id
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>
效果如下：效果圖顯示不出來，可以將代碼復制在本地演示。
ps：清除矩形區域 context.clearRect(x,y,width,height);
2.畫圓代碼如下：
圓弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
x:圓心的x坐標； y:圓心的y坐標；straAngle:開始角度； endAngle:結束角度；anticlockwise:是否逆時針（true）為逆時針，(false)為順時針
<script>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.arc(200,150,50,0,Math.PI*2,true);
context.closePath();
context.fillStyle="rgba(255,0,0,0.25)";
context.fill();
</script>
每次畫路徑都在前后加context.beginPath() 和context.closePath()