canvas学习day2——绘制文字，饼图升级

绘制文字
效果图
非常简单，就是给固定文字填充或者描边而已

var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 设置文字的属性
        * ctx.font = 和css语法一样。
        * 注意：这里设置字体大小时必须带单位，单位支持css的所有表示方式。
        * 注意：单独设置字体大小不会生效，必须要加一个额外属性样式。
        * */

        ctx.font = '2rem 微软雅黑';

        /*
        * 绘制描边文字：
        * ctx.strokeText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )
        * */

        ctx.strokeText( '嘻嘻嘻嘻嘻嘻', 100, 100 );

        /*
         * 绘制填充文字：
         * ctx.fillText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )
         * */

        ctx.fillText( '咯咯咯咯咯咯', 100, 200 );

饼图升级
效果如下

初始饼图

升级也就是需要加上外面的文字
1、取到弧度的中间点，然后画平分线
中间角度等于（初始角度+结束角度）/2
根据中间线的角度，求中间的线的x和y坐标：

lineX = self.x + ( self.r + 20 ) * Math.cos( angleToRadian( lineAngle ) );
lineY = self.y + ( self.r + 20 ) * Math.sin( angleToRadian( lineAngle ) );

2、加上对应的文字

if ( lineAngle >= 90