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();