Zaznaczanie przecinającego się obszaru między dwoma okręgami na płótnie

Próbuję oznaczyć zachodzący obszar między dwoma okręgami (jak na diagramie Venna). Pomyślałem, że sposobem na to jest narysowanie dwóch łuków za pomocą dwóch przecinających się punktów i wypełnienie ścieżki za pomocą fill(). Znam współrzędne punktów przecięcia, ale jak użyć tego jako wejścia dla funkcji arc()?Zaznaczanie przecinającego się obszaru między dwoma okręgami na płótnie

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

enter image description here

Źródło

2013-04-16 Yoav Kadosh

można narysować przecięcie 2 kształtów przy użyciu Płótnie za globalCompositeOperation

enter image description here

globalCompositeOperation pozwala kontrolować, które są wyświetlane na części starych i nowych rysunków płótno.

można zobaczyć przykłady każdego Compositing trybie tutaj: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

Używamy 2 z tych trybów Compositing aby podświetlić przecięcia swoimi 2 kołach:

źródłowego szczycie

Zważywszy, że lewy okrąg jest już rysowany, źródło-na-wierzch wyciąga tylko przecinającą się część prawego koła.

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

destination-over

Zważywszy, że lewe koło jest już remis, cel-over opracuje właściwą koło ramach istniejącego lewym kole.

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

To dużo objąć, więc może wypowiedzieć się cały kod rysowania, a następnie Odkomentuj to jedna opration-at-a-czas, aby zobaczyć, jaki wpływ ma każda operacja.

Oto kod i Fiddle: 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>

Źródło

2013-04-16 20:09:48 markE

Dzięki za gruntowną odpowiedź! –

Zaznaczanie przecinającego się obszaru między dwoma okręgami na płótnie

Odpowiedz

Powiązane problemy