【canvas】画布画圆

画圆的角度：

PI=180度

 

绘制圆的语法:

c.arc(x坐标，y坐标，r，开始角度(弧度)，结束角度(弧度)，是否是逆时针方向)

 

弧度的计算公式:

180°/π=60°/60度所对应的弧度

由上面的等式演变计算“60度所对应的弧度”=60*π/180

 

 

 

 

 第一丶画闭合的圆弧路径图:

        var canvas=document.querySelector("#chen");//找到画布才能操作
        var c=canvas.getContext('2d');//定义画布为2d
        c.beginPath();
        c.moveTo(150,100);//定圆心
        c.arc(150,100,60,160*Math.PI/180,270*Math.PI/180);//画圆弧
        c.closePath();//让圆弧和圆心连接起来形成一个闭合路径
        c.stroke();//绘图
        c.fillStyle="#bece25";//设置填充颜色，填充颜色是状态的所以是公用的，如果要其他要填充的地反填充别的颜色需要重新设置
        c.fill();//进行填充    

结果为:

第二丶画饼装图

        var canvas=document.querySelector("#chen");//找到画布才能操作
        var c=canvas.getContext('2d');//定义画布为2d
        c.beginPath();
        c.moveTo(150,100);//定圆心
        c.arc(150,100,60,160*Math.PI/180,270*Math.PI/180);//画圆弧
        c.closePath();//让圆弧和圆心连接起来形成一个闭合路径
        c.stroke();//绘图
        c.fillStyle="#bece25";//设置填充颜色，填充颜色是状态的所以是公用的，如果要其他要填充的地反填充别的颜色需要重新设置
        c.fill();//进行填充

        c.beginPath();
        c.moveTo(150,100);
        c.arc(150,100,60,270*Math.PI/180,60*Math.PI/180);
        c.closePath();
        c.stroke();
        c.fillStyle="#f88";
        c.fill();

        c.beginPath();
        c.moveTo(150,100);
        c.arc(150,100,60,60*Math.PI/180,160*Math.PI/180);
        c.closePath();
        c.stroke();
        c.fillStyle="#f1b913";
        c.fill();

结果为: