1. ev
  2. Soru-cevap
  3. Tuval içinde iki daire arasındaki kesişen alanı işaretleme

Tuval içinde iki daire arasındaki kesişen alanı işaretleme

2013-04-16 21 views
7

İki daire arasındaki örtüşen alanı işaretlemeye çalışıyorum (Venn Şemasında olduğu gibi). Bunu yapmanın yolunun, iki kesişen noktayı kullanarak iki yay çizerek ve fill() kullanarak yolu doldurmak olduğunu düşündüm. Kesişme noktalarının koordinatlarını biliyorum, ancak bunu arc() işlevi için bir girdi olarak nasıl kullanırım?Tuval içinde iki daire arasındaki kesişen alanı işaretleme

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

enter image description here

kaynak

2013-04-16 Yoav Kadosh

cevap

9

kullanarak 2 şekillerin kesişim çizebilir tuvalin globalCompositeOperation eski ve yeni çizimler parçaları gösterilir globalCompositeOperation kontrol sağlayan

enter image description here

tuval.

Burada her birleştirmeden modun örnekler görebilirsiniz:

kaynak üstünde olduğu göz önüne alındığında: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

Biz 2 dairelerin kesişimine vurgulamak için bu kompozisyon modların 2'yi kullanmak sol daire zaten çizilmiştir, kaynak-atopu, 'u sadece doğru çemberin kesişen parçasını çizecektir.

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

hedef üzerinde sol daire zaten çizmek olduğu göz önüne alındığında

, hedef üzerinde mevcut sol dairenin altında sağ daireyi çekecektir.

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

O almak çok oluyor, böylece tüm çizim kod dışında bir açıklama olabilir ve daha sonra yorumsuz o tek opration-at-a-time her işlem vardır etkisini görmek için. kapsamlı cevap için 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>

kaynak

2013-04-16 20:09:48 markE

+0

Teşekkür:

İşte kod ve Fiddle var! –

İlgili konular

 İlgili konular