Javascript 如何删除画布上两个透明形状的交点？

我想删除两个形状的交集，我知道要做到这一点，我可以使用XOR操作。问题是我需要这两个形状是透明的。通过使两个形状透明，不会消除交点

您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“红色”；
ctx.fillRect（20,20,75,50）；
ctx.fillStyle=“蓝色”；
ctx.globalCompositeOperation=“xor”；
ctx.fillRect（50,50,75,50）；
ctx.fillStyle=“rgba（255,0,0,0.5）”；
ctx.fillRect（150,20,75,50）；
ctx.fillStyle=“rgba（40,23,0,0.5）”；
ctx.globalCompositeOperation=“xor”；
ctx.fillRect（180,50,75,50）；

清除重叠图像中像素的一种简单方法（可能过于简单，但效果不错）是在自己的画布上以及主画布上绘制每个图像

然后，我们可以逐个像素地通过主画布，清除两幅图像中的任何像素，即使它只有非常轻微的不透明度

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“rgba（255,0,0,0.5）”；
ctx.fillRect（150,20,75,50）；
ctx.fillStyle=“rgba（40,23,0,0.5）”；
ctx.globalCompositeOperation=“xor”；
ctx.fillRect（180,50,75,50）；
var c1=document.createElement（'canvas'）；
var ctx1=c1.getContext（“2d”）；
ctx1.fillStyle=“rgba（255,0,0,0.5）”；
ctx1.fillRect（150,20,75,50）；
var c2=document.createElement（'canvas'）；
var ctx2=c2.getContext（“2d”）；
ctx2.fillStyle=“rgba（40,23,0,0.5）”；
ctx2.fillRect（180,50,75,50）；
设imgData=ctx.getImageData（0,0300150）；
for（设i=0；i<300；i++）{
对于（设j=0；j<150；j++）{
//如果两个图像的不透明度均大于0，则清除该像素
if（ctx1.getImageData（i，j，1，1）.data[3]&&ctx2.getImageData（i，j，1，1）.data[3]）{
ctx.clearRect（i，j，1，1）；
}
}
}

您的浏览器不支持HTML5画布标记。

对不起，如果它们是透明的，您如何知道交叉点没有消除？你能在这方面做些扩展吗？谢谢你的回复。在第二组矩形（运行代码片段）中，可以看到，由于交叉点是透明的，所以它并没有被消除，可能对“透明”这个词有点混淆@Adriano。这并不意味着CSS意义上的颜色是透明的，它意味着不透明度小于1，也许“部分透明”描述了它。