使用canvas元素-art方法绘制圆弧

最近在学习HTML5，发现canvas真的很棒，canvas元素是一种可供绘图的平面，我们用JavaScript对它进行配置和操作。我这里说一下arc方法绘制圆弧，顺便提一下涉及到的基础知识。

首先看这段代码：

 var ctx=document.getElementById("canvas").getContext("2d");

/*这是调用HTMLCanvasElement对象的getContex方法，为画布返回绘图上下文，这里是采用2d上下文

      ctx.fillStyle="yellow";
        ctx.strokeStyle="black";

/*这两句代码是设置填充和笔触样式，这里就是为你绘制图形填充颜色，实心的就调用fillStyle，空心的就调用strokeStyle,相对应的图形文字的实心空心样式就不提了

  ctx.lineWidth=3;

/*这是用于绘制线条的宽度

   ctx.strokeRect(250,20,100,200);     

/*这是绘制一个空心的矩形，第一个参数和第二个参数表示从canvas元素左上角算起的偏移值，后两个参数代表矩形的宽和高。

/*接下来就是用路径绘图的部分了，稍微提一下绘制一条路径的基本顺序:

调用beginPath方法；

用moveTo方法移动起点；

用arc和lineTo等方法绘制子路径；

调用closePath方法（可选），这个方法主要用于闭合所画的路径

调用fill和stroke方法，这里是填充，上面提到的closePath会对stroke绘制的线条有影响*/

 

/*这里是调用arc方法绘制圆弧，也是本文的重点哦

  

       ctx.beginPath();
        ctx.arc(70,70,60,0,Math.PI*2,true);

/*这里要注意canvas里面的角度并不是用数学里面的度数来表示的而是用弧度，例如360度就是2*Math.PI   

    ctx.stroke();

     ctx.fill();

看上面这段代码，首先讲讲arc的参数。arc(x,y,rad,startAngle,endaAngle,direction),x,y代表的圆弧的圆心，第三个参数代表圆弧的半径，第四个代表起始的角度，第五个代表结束的角度，最后一个代表圆弧的方向，这里默认的是顺时针方向。值得注意的是，这里direction参数的意思是是否是逆时针方向，所以当把这个参数设为true时，就变成了逆时针方向。这其中的区别后面详细讲解

上面这段实际上是画了一个整圆

  注意，这里的起始角度和数学里面差不多，你把你的圆当一个坐标以圆心为原点，0就是X轴的正半轴开始

这里的最后一个参数为true时，表示逆时针方向，第四个参数和第五个参数表示从90度到180度，注意这里的角度起始点和终止点还是按照普通坐标轴的顺时针来的（这里不要跟数学里的搞混了，例如Y轴的负半轴表示2/Math.PI，X负半轴表示Math.PI.逆时针方向表示的意思是弧度的方向,就如同下图中线条的方向。 

      ctx.beginPath();
        ctx.arc(200,70,60,Math.PI/2,Math.PI,true);
        ctx.fill();
        ctx.stroke();

演示一个为false的

        ctx.beginPath();
        ctx.arc(200,70,60,Math.PI/2,Math.PI,flase);
        ctx.fill();
        ctx.stroke();

这些都掌握了，就可以利用一些技巧来绘制一些有意思的图形了，例如：

      ctx.beginPath();
        var val=0;
        for(var i=0;i<5;i++){
           ctx.arc(350,70,60,val,val+Math.PI/4,false);
           val+=Math.PI/2;
        }
        ctx.closePath;
        ctx.fill();
        ctx.stroke();

/*这个图形就是把整个圆分为四部分，在循环里面每次移动2/Math.PI,而这每一个2/Math.PI又分为两部分，一半绘制弧形，一半为直线。*/