在Canvas中标记两个圆圈之间的相交区域

我想标记两个圆圈之间的重叠区域（如在维恩图中）。我想通过使用两个相交点绘制两条弧并且使用fill()填充路径来完成此操作的方式。我知道交点的坐标，但是如何将其用作arc()函数的输入？在Canvas中标记两个圆圈之间的相交区域

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

enter image description here

来源

2013-04-16 Yoav Kadosh

可以使用平2种形状的交集画布globalCompositeOperation

enter image description here

掌握globalCompositeOperation允许你控制哪些新老图纸的部分显示在画布。

你可以看到每个合成模式在这里的例子：http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

我们使用这些合成模式2突出你的2圈的交集：

源之上

鉴于左圆已经画出来了，源顶上只会画出只有右圆的相交部分。

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

目的地在

鉴于左边的圆圈已经绘制，目的地在将画正圆形现有左边的圆圈下。

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

这是一个很大采取，所以你可能注释掉所有的绘制代码，然后取消它一调度研究-AT-A-时间看到每个操作都有什么样的影响。

这里的代码和一个小提琴：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>

来源

2013-04-16 20:09:48 markE

感谢完整的答案！ –

在Canvas中标记两个圆圈之间的相交区域

回答

相关问题