canvas中圆的角度和弧度

圆（弧）

οnlοad=function(){
  draw1();
  draw2();
  draw3();
};
/* 整个圆 */
functiondraw1(){
  varcanvas=document.getElementById('c1');
  if(!canvas||!canvas.getContext){returnfalse;}
  varctx=canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70,70,60,0,Math.PI*2,false);
  ctx.stroke();
}
/* 10° ~ 80°，无填充 */
functiondraw2(){
  varcanvas=document.getElementById('c2');
  if(!canvas||!canvas.getContext){returnfalse;}
  varctx=canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70,70,60,10*Math.PI/180,80*Math.PI/180,true);
  ctx.stroke();
}
/* 10° ~ 80°，填充 */
functiondraw3(){
  varcanvas=document.getElementById('c3');
  if(!canvas||!canvas.getContext){returnfalse;}
  varctx=canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70,70,60,10*Math.PI/180,80*Math.PI/180,true);
  ctx.fill();
}

先看一下参数：

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

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

还有就是x轴向右为正 y轴向下为正 弧度顺时针走

结果如下图的上三个情况，也请自己输入加深印象。