在“画布”中标记两个圆之间的交叉区域 [英] Marking the intersecting area between two circles in Canvas
问题描述
我试图标记两个圆圈之间的重叠区域（如维恩图）。我认为这样做的方法是使用两个交叉点绘制两个弧，然后使用 fill（）填充路径。
我知道交叉点的坐标，但是如何使用它作为 arc（）函数的输入？
I am trying to mark the overlapping area between two circles (like in a Venn Diagram). I figured the way to do this is by drawing two arcs using the two intersecting points and than fill the path using fill().
I know the coordinates of the intersection points, but how do I use that as an input for the arc() function?
ctx.beginPath();
ctx.arc(circle1.x,circle1.y,circle1.r, ? , ? ,true);
ctx.fill();
ctx.closePath();
推荐答案
您可以使用canvas的globalCompositeOperation绘制2个形状的交集
globalCompositeOperation允许您控制画布上显示旧图和新图的哪些部分。
The globalCompositeOperation allows you to control which parts of old and new drawings are shown on the canvas.
您可以看到示例每个合成模式在这里： http：//www.html5canvastutorials。 com / advanced / html5-canvas-global-composite-operations-tutorial /
You can see examples of each compositing mode here: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/
我们使用其中两种合成模式来突出显示两个圆圈的交集：
We use 2 of these compositing modes to highlight the intersection of your 2 circles:
source-atop
鉴于左边的圆圈已经是draw，source-atop将仅绘制右侧圆圈的交叉部分。
Given that the left circle is already draw, source-atop will draw only the intersecting part of the right circle.
ctx.globalCompositeOperation="source-atop";
ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);
目的地结束
鉴于左侧圆圈已经绘制，目的地结束将在现有左侧圆圈下绘制右侧圆圈。
Given that the left circle is already draw, destination-over will draw the right circle under the existing left circle.
ctx.globalCompositeOperation="destination-over";
ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);
这需要很多东西，所以你可以注释掉所有的绘图代码然后取消注释-atration-at-time查看每个操作的效果。
It’s a lot to take in, so you might comment out all the drawing code and then uncomment it one-opration-at-a-time to see what effect each operation has.
这是代码和小提琴： 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>
这篇关于在“画布”中标记两个圆之间的交叉区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
