html - SVG 或 Canvas：填充/着色 2 个圆圈的重叠区域

Question

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

在我正在使用的工具中，用户可以创建圆圈并在屏幕上拖动它们。如果两个或多个圆圈重叠，用户可以选择重叠区域（想想维恩图）。我需要用颜色或渐变填充重叠区域。

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

Answer 1

我想出了一个办法：

1. 我用easeljs（html5画布）正常画了2个圆圈
2. 使用“destination-in”的复合操作在单独的容器中再次绘制 2 个圆圈
3. 缓存容器（否则合成操作会吹走整个图像）
4. 将缓存的容器添加到舞台

代码：

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);