HTML5画布（圆形）
案例1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.fillStyle="#ff0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #c3c3c3;">您的浏览器不支持</canvas>
</body>
</html>
效果图：
注释：
（1）开始创建路径：
cxt.beginPath();
（2）创建圆形路径：
cxt.arc( x , y , radius , startAngle , endAngle , anticlockwise )
x为绘制圆形的起点横坐标；y为绘制圆形的起点纵坐标；radius为圆形半径；startAngle为开始角度；endAngle为结束角度，
anticlockwise为是否按顺时针方向进行绘制，true为顺时针，false为逆时针方向绘制。
arc方法不仅可以绘制圆形，也可以用来绘制圆弧，只需指定开始角度与结束角度，如：Math.PI*1;
效果图：
（3）关闭路径：
cxt.closePath();
（4）绘制图形：
cxt.fill();
绘制图形时，除了可以使用fill方法（填充图形），还可以使用stroke方法（绘制图形边框）。
案例2：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
for(var i=0;i<10;i++)
{
cxt.beginPath();
cxt.arc(i*25,i*25,i*10,0,Math.PI*2,true);
cxt.closePath();
cxt.fillStyle='rgba(255,0,0,0.25)';
cxt.fill();
}
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="500" height="350" style="border: 1px solid #dddddd">您的浏览器不支持</canvas>
</body>
</html>
效果图：
如果把上例中开始创建路径语句与关闭路径这一语句删除，会绘制出怎样的图形？
案例3：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
for(var i=0;i<10;i++)
{
cxt.arc(i*25,i*25,i*10,0,Math.PI*2,true);
cxt.fillStyle='rgba(255,0,0,0.25)';
cxt.fill();
}
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="500" height="350" style="border: 1px solid #dddddd">您的浏览器不支持</canvas>
</body>
</html>
效果图：
