如何仅绘制这部分弧线？

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

如何仅绘制这部分弧线？

回答

相关问题