Đánh dấu khu vực giao nhau giữa hai vòng tròn trong Canvas

Tôi đang cố gắng đánh dấu khu vực chồng chéo giữa hai vòng tròn (như trong Sơ đồ Venn). Tôi đã tìm cách để làm điều này là bằng cách vẽ hai cung bằng cách sử dụng hai điểm giao nhau và hơn điền vào đường dẫn sử dụng fill(). Tôi biết tọa độ của các điểm giao nhau, nhưng làm cách nào để sử dụng điều đó làm đầu vào cho hàm arc()?Đánh dấu khu vực giao nhau giữa hai vòng tròn trong Canvas

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

enter image description here

Nguồn

2013-04-16 Yoav Kadosh

Bạn có thể vẽ giao điểm của 2 hình dạng sử dụng globalCompositeOperation canvas của

enter image description here

Các globalCompositeOperation phép bạn kiểm soát phần nào của bản vẽ cũ và mới được hiển thị trên canvas.

Bạn có thể xem các ví dụ của mỗi chế độ hợp lại ở đây: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

Chúng tôi sử dụng 2 trong các chế độ hợp lại để làm nổi bật giao điểm của 2 vòng tròn của bạn:

nguồn trên đỉnh

Cho rằng vòng tròn bên trái đã được vẽ, nguồn trên đỉnh sẽ vẽ chỉ phần giao nhau của vòng tròn bên phải.

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

nơi giao

Cho rằng các vòng tròn bên trái đã được vẽ, điểm đến giao sẽ rút ra những vòng tròn ngay dưới vòng tròn bên trái đang tồn tại.

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

Rất nhiều điều cần lưu ý, vì vậy bạn có thể nhận xét tất cả mã vẽ và sau đó bỏ ghi chú một lần để xem hiệu ứng của mỗi thao tác.

Dưới đây là mã và một 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>

Nguồn

2013-04-16 20:09:48 markE

Cảm ơn cho câu trả lời thấu đáo! –

Đánh dấu khu vực giao nhau giữa hai vòng tròn trong Canvas

Trả lời

Các vấn đề liên quan