如何僅繪製這部分弧線？

enter image description here

我知道P1，P2和中心，這是2D點。我也知道角度p1-center-p2和半徑r。

如何使用畫布'function arc（）繪製圓弧的填充部分？

編輯

我真正需要做的是，給定2點和角度，畫這2點之間的曲線，使得P1中心-P2角度是給定角度。

我所做的是計算圓心的中心和半徑，其中有2個點，現在我需要繪製連接p1和p2並具有給定角度的直線。這是我的函數來計算circunference中心（其中正常工作）

function getCenter(v0x, v0y, v1x, v1y, curve) { 
    // result = p0 
    resx = parseFloat(v0x); 
    resy = parseFloat(v0y); 

    // tmpvec = (p1 - p0) * .5 
    tmpx = (v1x - v0x)/2; 
    tmpy = (v1y - v0y)/2; 

    // result += tmpvec 
    resx = resx + tmpx; 
    resy = resy + tmpy; 

    // rotate 90 tmpvec 
    tmptmpx = tmpx; 
    tmptmpy = tmpy; 
    tmpy = -tmptmpx; 
    tmpx = tmptmpy; 

    // tmpvec *= 1/tan(c/2) 
    tmpx *= 1/Math.tan(curve/2); 
    tmpy *= 1/Math.tan(curve/2); 

    // return res + tmpvec 
    return [resx+tmpx, resy+tmpy]; 
}

來源

2011-12-08 Ivan

功能是在一個圓圈計算角度來分有幫助。

function drawArcPart(cx, cy, radius, p1x, p1y, angle) { 

    var x = p1x - cx; 
    var y = p1y - cy; 

    var startAngle = Math.atan2(y,x); 
    var endAngle = startAngle - angle; 

    var ctx = document.getElementById('canvas').getContext('2d'); 
    ctx.fillStyle='black'; 
    ctx.beginPath(); 
    ctx.arc(cx, cy, radius, startAngle, endAngle, true); 
    ctx.fill(); 
}

enter image description here

我已經上傳這個JavaScript來jsFiddle，有一個擴展，還提請分，兩者你的例子。

來源

2011-12-08 00:44:02 Jonas

但我有畫其他的東西，我不希望刪除 – Ivan

我真正需要的是一樣的東西：的moveTo（P1）包含arcTo（P2，半徑） – Ivan

這似乎並不P1時，必須工作比P2不同的x分量：http://i.imgur.com/AKpgv.png – Ivan

試試這個

<html> 
    <head></head> 
<body onload="drawShape();"> 
<div> 
    <canvas id="tutorial" width="150" height="200"></canvas> 
</div> 
<SCRIPT type="text/javascript"> 
function drawShape(){ 
    // get the canvas element using the DOM 
    var canvas = document.getElementById('tutorial'); 
    // Make sure we don't execute when canvas isn't supported 
    if (canvas.getContext){ 
     var ctx = canvas.getContext('2d'); 

     ctx.beginPath(); 
     var x   = 100;    // x coordinate 
     var y   = 100;    // y coordinate 
     var radius  = 100;     // Arc radius 
     var startAngle = (Math.PI)-((Math.PI)/4);      // Starting point on circle 
     var endAngle = (Math.PI)+((Math.PI)/4); // End point on circle 
     ctx.arc(x,y,radius,startAngle,endAngle, false);  
     ctx.fill(); 
    } else { 
     alert('You need Safari or Firefox 1.5+ to see this demo.'); 
    } 
} 
</SCRIPT> 
</body> 
</html>

距離mozilla HTML5 tuts

變形例，其結果是here

這是你想要的嗎？

來源

2011-12-08 01:10:18 kcsoft

如何僅繪製這部分弧線？

回答

相關問題