【js学习笔记-113】------<canvas>绘制和填充曲线

<canvas>绘制和填充曲线

路径由子路径组成，子路径又由连接的点组成。那些点是通过直线来连接的，但点与点之间并不总是通过直线段连接的。CanvasRenderingContext2D对象定义了一些方法，这些方法用于在子路径中添加了新的点，并用曲线将当前点和新增的点连接起来。

l  arc()

此方法实现在当前子路径中添加一条弧。它首先将当前点和弧形的起点用一条直线连接，然后用圆的一部分来连接弧形的起点和终点，并把弧形终点作为新的当前点。要绘制一个弧形需要指定6个参数：圆心的x,y坐标、圆的半径、弧形的超始和结束的角度及弧形的方向（顺时针还是逆时针）

l  arcTo()

此方法绘制一条直线和一段圆弧（和arc()方法一样），但是，不同的是，绘制圆弧的时候指定的参数不同。指定半径为0时，绘制一条直线，如果非0然后将这条直线按照圆形形状变成曲线。

l  bezierCurveTo()

此方法实现在当前子路径中添加一个新的点，并利用三次贝赛尔曲线将它和当前点相连。曲线的形状由两个“控制点”c1和c2确定。

l  quadraticCurveTo()

类似bezierCurveTo()它是二次贝塞尔曲线而不是三次

  //一个工具函数，用于将角度制转化成弧度制

    function radx(x){return Math.PI*x/180;}

 

    //绘制一个圆形，如果需要椭圆的话则进行相应的缩放和旋转即可

    //由于没有当前点，因此绘制的圆形不需要当前点到圆形起点之间的直线

        c.beginPath();

        c.arc(75,100,50,0,rads(360),false);

        c.moveTo(200,100);

        c.arc(200,100,50,rads(-60),rads(0));

        c.closePath();

 

        c.moveTo(325,100);

       c.arc(325,100,50,rads(-60),rads(0),true);

        c.closePath();

 

        c.moveTo(450,50);

        c.arcTo(500,50,500,150,30);

        c.arcTo(500,150,400,150,20);

        c.arcTo(400,150,400,50,10);

        c.arcTo(400,150,500,50,0);

        c.closePath();

 

        //二次贝塞尔曲线：一个控制点

        c.moveTo(75,250);

        c.quadraticCurveTo(100,200,175,250);

        c.fillRect(100-3,200-3,6,6);

        //三次贝塞尔曲线

        c.moveTo(200,250);

       c.bezierCurveTo(220,200,280,280,300,250);

        c.fillRect(200-3,200-3,6,6);

        c.fillRect(280-3,280-3,6,6);

 

        //定义一些图形属性并绘制曲线

        c.fillStyle = "#aaa";

        c.lineWidth = 5;

        c.fill();

        c.stroke(); //色勒外边框