定义和用法
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()