canvas:绘制基础图形

1，绘制直线：

设定起点：moveTo(x坐标，y坐标),    

设定终点：lineTo(x坐标，y坐标)

开始绘制：stroke()

新的路径： beginPath();

封闭路径：closePath();

裁切图形：clip();

2，绘制矩形：

方法一：

c.moveTo(0,0);

c.lineTo(0,200);

c.lineTo(200,200);

c.lineTo(200,0);

c.closePath();

c.stroke();

方法二：

c.rect(x,y,w,h);

c.stroke();

方法三：

strokeRect();

3，绘制填充矩形：

方法一：

c.beginPath();

c.fillStyle="yellow";

c.rect(300,250,150,150);

c.fill();                  //填充图形

c.stroke();

方法二：

c.beginPath();

c.fillStyle="green";            //填充颜色

c.fillRect(500,400,150,150);

4，绘制圆/弧：

arc（x,y,r,开始角度，结束角度，true/false）：创建圆弧/曲线（用于创建圆形或部分圆）

                true/false ：逆时针/顺时针

arcTo(x1,y1,x2,y2,r) 方法在画布上创建介于两个切线之间的弧/曲线

    eg1：

    c.arc(150,50,130,0,Math.PI);  //Math.PI代表弧度，换算成角度为180度

    c.stroke();

    //画圆形

    function drawCircle(x,y,r){

        c.beginPath();

        for(var i=0;i<360;i++){

            c.lineTo(x+r*Math.cos(i*Math.PI/180),y+r*Math.sin(i*Math.PI/180));  //圆上的点

            c.stroke();

        }

    }

5，绘制扇形：

c.fillStyle="yellow";

c.strokeStyle="#a9a9a9";

c.lineWidth=2;

c.beginPath();

c.moveTo(300,300);

c.arc(300,300,200,Math.PI*7/6,Math.PI*11/6,false);

c.fill();

c.closePath();

c.stroke();

6，绘制环形：

c.fillStyle="yellow";

c.strokeStyle="#a9a9a9";

c.lineWidth=2;

c.beginPath();

c.moveTo(300,300);

c.arc(300,300,200,Math.PI*7/6,Math.PI*11/6,false);

c.fill();

c.closePath();

c.stroke();

c.beginPath();

c.fillStyle="#a9a9a9";

c.moveTo(300,300);

c.arc(300,300,100,Math.PI*7/6,Math.PI*11/6,false);

c.fill();

c.closePath();

c.stroke();

7，文字的绘制方法：

strokeText("文字",x,y,maxWith)  //绘制描边空心文字

fillText("文字",x,y,maxWith)    //绘制实心

字体样式：font()