Bạn có thể vẽ giao điểm của 2 hình dạng sử dụng globalCompositeOperation canvas của
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>
Cảm ơn cho câu trả lời thấu đáo! –