Javascript 如何在不删除背景的情况下删除两个矩形的交点？

我在画布上画画，我想在不移除背景的情况下移除两个矩形的交点

红色矩形将是我的背景，我只想删除黄色和蓝色矩形之间的交点，而不删除红色。如果我使用属性

ctx.globalCompositeOperation=“destination out”背景（红色）被删除


我怎样才能做到这一点

我的代码：

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.fillStyle = "blue";
ctx.globalCompositeOperation = "source-over";
ctx.fillRect(50, 50, 75, 50);
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = "yellow";
ctx.fillRect(59,30,75,50);

您可以尝试将背景设置为红色。
您可以尝试将背景设置为红色。
在绘制红色形状并将其放在其他内容之后之前，您应该使用
destination over

根据MDN：“在现有画布内容后面绘制新形状。”

因此，使用
destination out
进行排除，然后在后面添加红色形状


var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（50,50,75,50）；
ctx.globalCompositeOperation=“目的地输出”；
ctx.fillStyle=“黄色”；
ctx.fillRect（59,30,75,50）；
ctx.globalCompositeOperation=“目的地结束”；
ctx.fillStyle=“红色”；
ctx.fillRect（20,20,75,50）
在绘制红色形状并将其放在其他内容之后之前，您应该使用
destination over

根据MDN：“在现有画布内容后面绘制新形状。”

因此，使用
destination out
进行排除，然后在后面添加红色形状


var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（50,50,75,50）；
ctx.globalCompositeOperation=“目的地输出”；
ctx.fillStyle=“黄色”；
ctx.fillRect（59,30,75,50）；
ctx.globalCompositeOperation=“目的地结束”；
ctx.fillStyle=“红色”；
ctx.fillRect（20,20,75,50）
在向图像添加任何内容之前，您需要创建背景的副本

复制画布

function copyImage(image) { // image can be any image source
    const copy = document.createElement("canvas");
    copy.width = image.width;
    copy.height = image.height;
    copy.ctx = copy.getContext("2d");
    copy.ctx.drawImage(image, 0, 0);
    return copy;
}

一旦有了背景的副本，就可以对图像进行分层

台阶


首先清理画布
画蓝色的盒子
将
globalCompositeOperation
设置为
“目标输出”
画黄色的盒子
将
globalCompositeOperation
设置为
“目标结束”
画背景


const ctx=canvas.getContext（“2d”）；
//创建背景
ctx.fillStyle=“红色”；
ctx.fillRect（10，10，200，100）；
//复制背景
const bgImage=copyImage（画布）；
//透明帆布
ctx.clearRect（0,0,300,150）；
//画蓝色的盒子
ctx.fillStyle=“蓝色”；
ctx.fillRect（100,75,150,70）；
//绘制黄色以删除像素
ctx.globalCompositeOperation=“目的地输出”；
ctx.fillRect（150,50,150,70）；
//画背景
ctx.globalCompositeOperation=“目的地结束”；
ctx.drawImage（bgImage，0,0）；
//复制图像util函数
函数copyImage（img，{width，height}=img）{
const c=Object.assign（document.createElement（“canvas”），{width，height}）.getContext（“2d”）；
c、 绘图图像（img，0，0）；
返回c.canvas；
}
canvas{border:2px solid#000}
在向图像添加任何内容之前，您需要创建背景的副本

复制画布

function copyImage(image) { // image can be any image source
    const copy = document.createElement("canvas");
    copy.width = image.width;
    copy.height = image.height;
    copy.ctx = copy.getContext("2d");
    copy.ctx.drawImage(image, 0, 0);
    return copy;
}

一旦有了背景的副本，就可以对图像进行分层

台阶


首先清理画布
画蓝色的盒子
将
globalCompositeOperation
设置为
“目标输出”
画黄色的盒子
将
globalCompositeOperation
设置为
“目标结束”
画背景


const ctx=canvas.getContext（“2d”）；
//创建背景
ctx.fillStyle=“红色”；
ctx.fillRect（10，10，200，100）；
//复制背景
const bgImage=copyImage（画布）；
//透明帆布
ctx.clearRect（0,0,300,150）；
//画蓝色的盒子
ctx.fillStyle=“蓝色”；
ctx.fillRect（100,75,150,70）；
//绘制黄色以删除像素
ctx.globalCompositeOperation=“目的地输出”；
ctx.fillRect（150,50,150,70）；
//画背景
ctx.globalCompositeOperation=“目的地结束”；
ctx.drawImage（bgImage，0,0）；
//复制图像util函数
函数copyImage（img，{width，height}=img）{
const c=Object.assign（document.createElement（“canvas”），{width，height}）.getContext（“2d”）；
c、 绘图图像（img，0，0）；
返回c.canvas；
}
canvas{border:2px solid#000}