HTML5 Canvas 画圆【每日一段代码4】

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:2px solid blue;">
您的浏览器不支持。
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(100,100,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>

显示图：

【画圆，Math.PI 函数的应用。cxt.arc(100,100,30,0,Math.PI*2,true); 括号内第一个和第二个参数，代表圆心坐标。第三个参数是圆的半径。第四个参数代表圆周起始位置。0 PI就是起始位置。沿顺时针路线，分别是0.5 PI（正下方），1 PI和1.5 PI（正上方），为画饼图提供了扇形范围的依据。第五个参数是弧长Math.PI*2就是整个圆，Math.PI是半圆。第六个参数是一个布尔值，true是顺时针false是顺时针。】