JAVA填充圆形相交区域_在Canvas中标记两个圆圈之间的相交区域

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

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

我们使用这些合成模式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-时间看到每个操作都有什么样的影响。

body{ background-color: ivory; }

canvas{border:1px solid red;}

$(function(){

var canvas=document.getElementById("canvas");

var ctx