2次スライスを3つの小さなスライスに分割するHTML5 CANVAS JS

Question

私はパイチャートのスライスを作成するのに使う2次曲線を持っています。スライスはxとyの軸にあり、中心点は（0,0）にあります。半径はradiusXとradiusYで可変です。このスライスは90度移動します。

私はこのスライスを3つの別々のスライス（それぞれ30度の角度を持つ）に分割し、それらの親スライスのどの曲線にもマッチさせる必要があります。

以下の画像は、スライスの可能な例を示しています。

ここ

は私が作った機能ですが、それだけで正常に動作していないです：

//globalPosX and globalPosY equal whatever position each of the two large black circles have repectively. 
    var canvas = document.getElementById('CV_slices'); 
    var context = canvas.getContext('2d'); 
    var cenX = canvas.width/2; 
    var cenY = canvas.height/2; 
    var blackDotX = globalPosX - cenX; 
    var blackDotY = cenY - globalPosY; 
    var endX; 
    var endY; 
    var controlX; 
    var controlY; 
//set first slice 
    var startCoOrds = { 
     x: cenX , 
     y: globalPosY 
    };     

    for (i=1; i < 4; i++) { 
//make end(x,y) of previous slice the start(x,y) for the next slice. 
    endX = startCoOrds.x - (blackDotX*Math.sin(30)); 
    endY = startCoOrds.y + (blackDotY*Math.cos(30)); 
//set position of control point using position of start/end positions (at the moment only adjustibng using +10 -10 at end) 
    controlX = ((endX - startCoOrds.x) /2) + (startCoOrds.x) + 10; 
    controlY = ((endY - startCoOrds.y)/2) + (startCoOrds.y) - 10; 

// draw slice 
    context.save(); 
    context.beginPath(); 
    context.moveTo(cenX, cenY); 
    context.lineTo(startCoOrds.x, startCoOrds.y); 
    context.quadraticCurveTo(controlX, controlY, endX, endY); 
    context.lineTo(cenX, cenY); 
//make end(x,y) of previous slice the start(x,y) for the next slice 
    startCoOrds.x = endX; 
    startCoOrds.y = endY; 

    context.closePath(); 
    context.globalAlpha = 0.1; 
    context.fillStyle = "#333333"; 
    context.fill(); 
    context.lineWidth = 2; 
    context.strokeStyle = "#ffffff"; 
    context.stroke(); 
    context.restore(); 
    } 

Answer 1

使用に最も近い「黒丸は、スライスのサイズ/形状を調整します円の半径として「blackDot」を指定します。 円を使用して、四分円を3（see wiki） に分割し、ポイントを0,0と「blackDot "

あなたの円弧は、x軸またはy軸にスケーリングされた円の象限です。