SVG或Canvas：2个圆圈的填充/阴影重叠区域

Question

我试图找到填充两个任意重叠的圆的区域的方法。

在我正在使用的工具中，用户可以创建圆并在屏幕上拖动它们。如果两个或两个以上的圆圈重叠，用户可以选择重叠区域（请考虑Venn Diagram-ish）。我需要用颜色或渐变填充重叠区域。

这可能在浏览器中使用SVG和/或Canvas吗？

Answer 1

我想出一个办法：

1. 我用easeljs（HTML5画布）绘制2个圈通常
2. 使用 compositeOperation“目的地在”在一个单独的容器中再次画出2个圈
3. 缓存容器（否则所述复合操作将吹走整个图像）
4. 缓存容器添加到阶段

code：

var s1 = new createjs.Shape(), 
    s2 = new createjs.Shape(), 
    s3 = new createjs.Shape(), 
    s4 = new createjs.Shape(), 
    c1 = new createjs.Container(), 
    c2 = new createjs.Container(), 
    container = new createjs.Container(); 

s1.graphics.ss(2).beginStroke("black").beginLinearGradientFill(["#f6f6f6","#e5e5e5"],[0,1],0,-40,0,40).drawCircle(0,0,40); 
s1.x = s1.y = 80; 
c1.addChild(s1); 

s2.graphics.ss(2).beginStroke("black").beginLinearGradientFill(["#f6f6f6","#e5e5e5"],[0,1],0,-40,0,40).drawCircle(0,0,40); 
s2.x = s2.y = 120; 
c1.addChild(s2); 

container.addChild(c1);   

s3.graphics.ss(2).beginStroke("black").beginRadialGradientFill(["#FFF","#0FF"],[0,1],0,0,0,0,0,40).drawCircle(0,0,40); 
s3.x = s3.y = 80; 
c2.addChild(s3); 

s4.graphics.ss(2).beginStroke("black").beginLinearGradientFill(["#f6f6f6","#e5e5e5"],[0,1],0,-40,0,40).drawCircle(0,0,40); 
s4.x = s4.y = 120; 
s4.compositeOperation = "destination-in" 
c2.addChild(s4); 
c2.cache(0,0,220,220); 

container.addChild(c2);