Contrassegnare l'area intersecante tra due cerchi in Canvas

Sto provando a contrassegnare l'area di sovrapposizione tra due cerchi (come in un diagramma di Venn). Ho capito che il modo per farlo è disegnare due archi usando i due punti di intersezione e poi riempire il percorso usando fill(). Conosco le coordinate dei punti di intersezione, ma come faccio a utilizzarlo come input per la funzione arc()?Contrassegnare l'area intersecante tra due cerchi in Canvas

ctx.beginPath(); 
ctx.arc(circle1.x,circle1.y,circle1.r, ? , ? ,true); 
ctx.fill(); 
ctx.closePath();

enter image description here

fonte

2013-04-16 Yoav Kadosh

È possibile disegnare l'intersezione di 2 forme usando globalCompositeOperation di tela

enter image description here

Il globalCompositeOperation consente di controllare quali parti di vecchi e nuovi disegni vengono visualizzati su la tela.

È possibile vedere esempi di ciascuna modalità di compositing qui: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

Usiamo 2 di queste modalità di compositing per evidenziare l'incrocio dei tuoi 2 cerchi:

sorgente in cima

Dato che il cerchio di sinistra è già disegnato, la fonte in cima trarrà solo la parte intersecante del cerchio a destra.

ctx.globalCompositeOperation="source-atop"; 
    ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);

destinazione-over

Dato che il cerchio di sinistra è già disegnare, meta-over trarrà cerchio destro sotto la cerchio sinistro esistente.

ctx.globalCompositeOperation="destination-over"; 
    ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);

E 'un sacco di accogliere, così si potrebbe commentare tutto il codice di disegno e poi togliere il commento è un opration-at-a-tempo per vedere l'effetto che ogni operazione ha.

Ecco codice e un violino: http://jsfiddle.net/m1erickson/JGSJ5/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    ctx.fillStyle="yellow"; 
    ctx.strokeStyle="black"; 
    ctx.lineWidth=3; 

    var circle1={x:100,y:100,r:50}; 
    var circle2={x:140,y:100,r:50}; 


    // draw circle1 
    ctx.save(); 
    ctx.beginPath(); 
    ctx.arc(circle1.x,circle1.y,circle1.r, 0, 2*Math.PI, false); 
    ctx.stroke(); 
    ctx.fill(); 

    // composite mode "source-atop" to draw the intersection 
    ctx.beginPath(); 
    ctx.fillStyle="orange"; 
    ctx.globalCompositeOperation="source-atop"; 
    ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false); 
    ctx.fill(); 
    ctx.stroke(); 
    ctx.restore(); 

    // destination-over to draw fill for circle2 again 
    ctx.beginPath(); 
    ctx.globalCompositeOperation="destination-over"; 
    ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false); 
    ctx.fill(); 

    // back to normal composite mode (newest drawings on top) 
    ctx.globalCompositeOperation="source-over"; 

    // draw the stroke for circle1 again 
    ctx.beginPath(); 
    ctx.arc(circle1.x,circle1.y,circle1.r, 0, 2*Math.PI, false); 
    ctx.stroke(); 

    // draw the stroke for circle2 again 
    ctx.beginPath(); 
    ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false); 
    ctx.stroke(); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

fonte

2013-04-16 20:09:48 markE

Grazie per la risposta esauriente! –

Contrassegnare l'area intersecante tra due cerchi in Canvas

risposta

Problemi correlati