QML画图-Canvas画基本图形

1.canvas画矩形
  a.无路径画法   

    ctx.fillRect(200,100,50,40);    //填充
    ctx.strokeRect(200,100,50,40);  //描边

    注：先用fillRect填充了矩形，用stroke()，不能描边，因为虽然有个矩形，但不存在路径。
  b.rect   

    ctx.rect(300,100,50,40);
    ctx.stroke();
    ctx.fill();

    注：填充或描边会消耗大量资源，先画路径再填充或描边。
  c.lineTo
    用4个lineTo画一个矩形，无必要。
  d.圆角矩形
    用arcTo画四个“钩子”，组成圆角矩形。
    
2.Canvas画圆

  ctx.arc(300,300,100,0,Math.PI*2);
  ctx.stroke();
  ctx.fill();

3. Canvas画扇形

    /** 扇形
      * @param x 扇形圆心x左标
      * @param y 扇形圆心y坐标
      * @param r 扇形半径
      * @param angleBegin 扇形开始角度
      * @param angleEnd 扇形结束角度
      * @param ifAnticlockwise 是否是逆时针
      */
    function getsectorPath(ctx, x, y, r, angleBegin, angelEnd, ifAnticlockwise)
    {
        try
        {
            ctx.arc(x, y, r, angleBegin, angelEnd, ifAnticlockwise);
            ctx.lineTo(x,y);
            ctx.closePath();
        } catch(e) {
            console.log(e)
        }
    }

3.Canvas画椭圆

  a.使用lineTo画椭圆

    function getEllipsePath(ctx, xp, yp, a, b)//中点坐标，长轴/2，短轴/2
    {
        ctx.beginPath();
        //lineTo的画法,循环次数多，耗资源
        var xPos = xp + a;
        var yPos = yp;
        ctx.moveTo(xPos, yPos);
        for(var i=0; i<=360; i++)
        {
            var angle = i * Math.PI / 180;
            //参数方程：x=acosθ ， y=bsinθ
            xPos = xp + a*Math.cos(angle);
            yPos = yp - b*Math.sin(angle);
            ctx.lineTo(xPos, yPos);
        }
    }

  b.用arc画圆，然后把它缩放成一个椭圆

    ctx.save(); //先保存，之前画的图形不变动
    ctx.scale(a/b, 1); //缩放函数, 圆的中点坐标会改变，a/b:长轴/短轴的一半
    ctx.beginPath();
    ctx.arc(xp*b/a, yp, b, 0, 2 * Math.PI, false);
    ctx.stroke()
    // restore to original state
    ctx.restore() //将画布置回原来的状态，即不拉伸

  c.用四条贝赛尔曲线画出来，起点坐标为椭圆对应矩形的左上角点。

    var kappa = 0.5522848; //取值，来路不明？？
    var ox = a * kappa, // control point offset horizontal
    oy = b * kappa, // control point offset vertical
    xe = xp + 2*a, // x-end
    ye = yp + 2*b, // y-end
    xm = xp + a, // x-middle
    ym = yp + b; // y-middle
    ctx.moveTo(xp, ym);
    ctx.bezierCurveTo(xp, ym - oy, xm - ox, yp, xm, yp);
    ctx.bezierCurveTo(xm + ox, yp, xe, ym - oy, xe, ym);
    ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
    ctx.bezierCurveTo(xm - ox, ye, xp, ym + oy, xp, ym);
    //ctx.closePath();

   d.用四条贝赛尔曲线画出来，起点坐标为椭圆中点

     var kappa = 1 - 0.5522848; //取值，来路不明？？
     var ox = a * kappa, // control point offset horizontal
     oy = b * kappa, // control point offset vertical
     xe = xp + 2*a, // x-end
     ye = yp + 2*b, // y-end
     xm = xp + a, // x-middle
     ym = yp + b; // y-middle
     ctx.moveTo(xp-a, yp);
     ctx.bezierCurveTo(xp-a, yp-oy, xp-ox, yp-b, xp, yp-b);
     ctx.bezierCurveTo(xp+ox, yp-b, xp+a, xp-oy, xp+a, yp);
     ctx.bezierCurveTo(xp+a, yp+oy, xp+ox, xp+b, xp, yp+b);
     ctx.bezierCurveTo(xp-ox, yp+b, xp-a, yp+oy, xp-a, yp);
     //ctx.closePath();

   c.用两条贝塞尔曲线画出来

     var k = (2*a/0.75)/2,
     w = a,
     h = b;
     ctx.moveTo(xp, yp-h);
     ctx.bezierCurveTo(xp+k, yp-h, xp+k, yp+h, xp, yp+h);
     ctx.bezierCurveTo(xp-k, yp+h, xp-k, yp-h, xp, yp-h);
     //ctx.closePath();