圆(弧)ο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();
}
ο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轴向下为正 弧度顺时针走
结果如下图的上三个情况,也请自己输入加深印象。