html5 canvas绘图之context.arc画圆(狐)实例

canvas绘图画圆是用一个arc方法，它是从一个中心坐标点，半径为长度，画出从开始角度到结束角度的圆。

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

画圆（弧）,画圆或者圆弧。x,y为圆心坐标，radius为半径，startAngle,endAngle为开始/结束划圆的角度，anticlockwise为是否逆时针画圆（True为逆时针，False为顺时针）。

<canvas id="demo-canvas" width="800" height="800">
您的浏览器不支持<canvas>,建议升级。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("demo-canvas");
if (canvas.getContext){
   var centext = canvas.getContext('2d');
   /* 圆 */
   context.beginPath();
   context.arc(70, 70, 60, 0, Math.PI*2, false);
   context.stroke();
   /* 10° ~ 80°，无填充 */
   context.beginPath();
   context.arc(230, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
   context.stroke();
   /* 10° ~ 80°，填充 */
   context.fillStyle = "rgba(0, 0, 200, 1)";
   context.beginPath();
   context.arc(400, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
   context.fill();
}
<script>

注意这里的角度为弧度制，所以如果画一个正圆的话，是0 -> Math.PI * 2，而画60°的话，就是0 -> 60 * Math.PI / 180.

 

进入html5 canvas绘图详细教程