¿Cómo dibujar solo esta parte del arco?

Tome un vistazo a esta imagen:¿Cómo dibujar solo esta parte del arco?

enter image description here

Sé p1, p2, y el centro, que son puntos 2D. También sé el ángulo p1-center-p2 y el radio r.

¿Cómo puedo dibujar solo la parte rellena del arco con el lienzo 'function arc()?

EDITAR

Lo que realmente necesito hacer es, dado 2 puntos y un ángulo, dibujar una línea curva entre estos 2 puntos tales que el ángulo P1-P2-centro es el ángulo dado.

Lo que hago es calcular el centro y el radio de la circunferencia que tiene esos 2 puntos y ahora necesito dibujar la línea que une p1 y p2 y tiene el ángulo dado. Este es mi función para calcular el centro de la circunferencia (que funciona correctamente)

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]; 
}

Fuente

2011-12-08 Ivan

La función atan2(y,x) es útil para calcular el ángulo de puntos en un círculo.

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

He subido esta JavaScript para jsFiddle, con una extensión que señala también a los puntos, y tanto sus ejemplos.

Fuente

2011-12-08 00:44:02 Jonas

pero tengo otras cosas dibujadas lo cual no quiere eliminar – Ivan

Lo que realmente necesito es algo así como: moveTo (p1) arcto (P2, radio) – Ivan

Esto no parece estar funcionando cuando se tiene p1 un componente x diferente de p2: http://i.imgur.com/AKpgv.png – Ivan

probar este

<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>

Es un ejemplo modificado de mozilla HTML5 tuts

Y el resultado es here

¿Es esto lo que quieres?

Fuente

2011-12-08 01:10:18 kcsoft

¿Cómo dibujar solo esta parte del arco?

Respuesta

Cuestiones relacionadas