Javascript HTML画布透明笔划线

我想清除特定画布区域中的笔划矩形。我最初的想法是，我只需要使用相同的参数再次调用

context.strokeRect

函数，之前将

strokeStyle

更改为

transparent

。但是它不起作用。为什么以及如何修复它？请注意，我只想清除矩形的笔划（边框），而不是内部的所有内容

编辑：我只想清除边框，不想清除里面的所有内容，所以我不能使用

clearRect（）

方法。此外，我不能清除整个画布并重新绘制，因为画布包含动画

---

JS fiddle:

下面的示例有两个画布。

背景

只有一些文本。然后我用“红色”填充

前景

画布，并使用

globalCompositeOperation

“destination out”

删除像素。我还将alpha设置为0.5，并移除一些像素

const ctxB=background.getContext（“2d”）；
const ctxF=foreground.getContext（“2d”）；
ctxB.textAlign=“中心”；
ctxB.textBaseline=“中间”；
ctxB.font=“20px arial”；
ctxB.fillText（“一些背景文本”，150,25）；
ctxB.fillText（“一些背景文本”，150,75）；
ctxB.fillText（“一些背景文本”，150125）；
ctxF.lineJoin=“round”；
ctxF.fillStyle=“红色”；
ctxF.fillRect（0,0300150）；
ctxF.lineWidth=8；
ctxF.globalCompositeOperation=“目的地输出”；
ctxF.strokeRect（25,25250100）；
ctxF.fillRect（75,50150,50）；
ctxF.globalAlpha=0.5；
ctxF.fillRect（65,40170,70）；
ctxF.globalCompositeOperation=“源代码结束”
画布{
位置：绝对位置；
顶部：0px；
左：0px；
}

注意：rgba->（红色、蓝色、绿色、alpha），alpha值（范围从[0,1]）控制不透明度，1完全不透明。使用clearRect清除现有矩形我认为不起作用：尽管如此，我认为这是不可能的。您可能会更幸运地记录“绘制”过程并重放它，但不包括红色轮廓步骤。画布很像绘画。您不能仅撤消该笔划。设置
ctx.globalCompositeOperation=“destination out”
后，渲染的所有像素的alpha都将被删除或减少源像素的alpha
ctx.globalCompositeOperation=“source over”
恢复默认值。目标像素RGB值不会被源RGB更改（除非alpha结果为零，在这种情况下，所有通道都设置为零）