html - SVGまたはキャンバス：2つの円の重なり合う領域を塗りつぶす/シェーディングする

Question

任意に重なり合う2つの円の領域を埋める方法を見つけようとしています。

私が作業しているツールでは、ユーザーは円を作成して画面上でドラッグできます。2つ以上の円が重なっている場合、ユーザーは重なっている領域を選択できます（ベン図のように考えてください）。重なり合う領域を色またはグラデーションで塗りつぶす必要があります。

これは、ブラウザでSVGやCanvasを使用して可能ですか？

Answer 1

私は方法を考え出した：

1. 私はイーゼルjs（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);