Come disegnare solo questa parte dell'arco?

Date un'occhiata a questa immagine:Come disegnare solo questa parte dell'arco?

enter image description here

So p1, p2, e al centro, che sono punti 2D. Conosco anche l'angolo p1-centro-p2 e il raggio r.

Come posso disegnare solo la parte riempita dell'arco utilizzando l'arco di funzione canvas()?

EDIT

Quello che ho veramente bisogno di fare è, in 2 punti e un angolo, disegnare una linea curva tra questi 2 punti tali che l'angolo p1-centro-p2 è l'angolo determinato.

Quello che faccio è calcolare il centro e il raggio della circonferenza che ha quei 2 punti in esso e ora ho bisogno di disegnare la linea che unisce p1 e p2 e ha l'angolo dato. Questa è la mia funzione per calcolare il centro della circonferenza (che funziona correttamente)

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

fonte

2011-12-08 Ivan

La funzione atan2(y,x) è utile per calcolare l'angolo di punti in un cerchio.

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

ho caricato questa Javascript per jsFiddle, con un'estensione che attira anche i punti, ed entrambi i tuoi esempi.

fonte

2011-12-08 00:44:02 Jonas

Ma io ho altre cose tratte che non voglio cancellare – Ivan

Quello che ho veramente bisogno è qualcosa di simile: moveTo (p1) arcTo (p2, raggio) – Ivan

Questo non sembra funzionare quando p1 ha un componente x diverso da p2: http://i.imgur.com/AKpgv.png – Ivan

Prova questa

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

Si tratta di un esempio modificato da mozilla HTML5 tuts

E il risultato è here

E 'questo quello che vuoi?

fonte

2011-12-08 01:10:18 kcsoft

Come disegnare solo questa parte dell'arco?

risposta

Problemi correlati