Canvas绘图接口(曲线)

绘制一段弧线

使用arc()绘制弧线

context.arc(
    centerx,centery,radius,//圆心坐标，圆弧的半径
    startingAngle,endingAngle,//开始角度，结束角度
    anticlockwise=false//可选，是都是逆时针的绘制，默认false顺时针绘制
)
<script type="text/javascript">
        /*绘制一段弧线*/
        var canvas = document.getElementById('canvas');

        canvas.width = 800;
        canvas.height = 800;

        var context = canvas.getContext('2d');
        /**
         * [anticlockwise description]
         * @type {[type]}
         */

        context.lineWidth = 5;
        context.strokeStyle = '#aaa';

        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(50 + i*100,60,40,0,2*Math.PI*(i+1)/10);
            context.stroke();
        }
    </script>

绘制一个圆角矩形

/*绘制一个圆角矩形*/
        /**
         * [drawRoundRect 绘制一个圆角矩形]
         * @param  {[type]} cxt    [description]
         * @param  {[type]} x      [左上角的坐标]
         * @param  {[type]} y      [左上角的坐标]
         * @param  {[type]} width  [圆角矩形的宽]
         * @param  {[type]} height [圆角矩形的高]
         * @param  {[type]} radius [圆角矩形的半径]
         * @return {[type]}        [description]
         */
        function drawRoundRect(cxt,x,y,width,height,radius){
            //这里进行判断，防止半径过大，这样矩形就会变形
            if(2*radius > width || 2*radius > height){
                return;
            }
            cxt.save();
            cxt.translate(x,y);
            pathRoundRect(cxt,wi