Canvas之2画圆

• 1. cvs.arc(x,y,radius,startAngle,endAngle,anticlokwise);
     • x,y 圆心坐标
     • radius半径r
     • startAngle 起始角 以弧度计算(钟表的3点钟方向是0度,也就是x轴的正方向是0度,默认是顺时针)
     • endAngle 结束角
     • anticlokwise 是否逆时针 默认值false false表示顺时针

• 1. 案例

     • 案例1:边框半圆

       function draw1(){//边框圆
       	cvs.strokeStyle='#ffa50';//设置笔触样式(边框样式)颜色
       	cvs.beginPath();//开始一个路径
       	cvs.arc(500,500,100,0,Math.PI);//圆心坐标是500,500，半径是100px，起始角为0度，结束角为180度
       	cvs.closePath();//结束路径
       	cvs.lineWidth=10;//边框宽度为10px
       	cvs.stroke();//绘制图形以边框样式绘制
       }
       draw1();

     • 案例2:同心圆

       function draw2(){
       	cvs.fillStyle='orange';
       	cvs.beginPath();
       	//开始一个新的路径
       	cvs.arc(200,200,60,Math.PI/2,2*Math.PI);
       	//圆心坐标是(200,200),半径为60px,起始角为90度,结束角为360度
       	cvs.closePath();
       	//结束一个路径
       	cvs.fill();
       	//绘制图形以填充样式绘制
       	cvs.strokeStyle='yellow';
       	//设置 笔触样式(边框样式) 为黄色
       	cvs.lineWidth=40;
       	//边框的宽度为40px
       	cvs.beginPath();
       	//开始一个新的路径
       	cvs.arc(200,200,80,0,2*Math.PI);
       	//圆心坐标是(200,200),半径为80px,起始角度为0度,结束角度为360度
       	cvs.closePath();//结束一个路径
       	cvs.stroke();//绘制图形以边框样式绘制
       }
       draw2();

     • 案例3:每次调用fill绘制填充图的时候，会把当次路径的起始点和结束点分别连接，填充闭合部分(如果想让每个路径互不干扰 一定要记得写结束路径–>关闭路径)

       function draw3(){
       	cvs.strokeStyle='pink';//设置笔触样式(边框样式)颜色为粉色
       	cvs.beginPath();//开始一个路径
       	cvs.lineWidth=2;//边框的宽度为2px
       	cvs.arc(100,100,100,0,Math.PI);//圆心坐标是100,100,半径为100,起始角度为0度,结束角度为180度
       	cvs.closePath();//结束一个路径
       	cvs.stroke();//绘制图形以边框样式绘制
       	cvs.fillStyle='gray';//设置填充颜色为灰色
       	cvs.arc(300,300,80,0,Math.PI/2);//圆心坐标是300,300，半径是80px，起始角度为0，结束角度为90度
       	cvs.closePath();
       	cvs.fill();
       }
       draw3();