Javascript 如何仅清除矩形边框？（JS，帆布）

我试图只清除strokert（），并将内容保留在该矩形中。 在本例中，如何清除绿色矩形而不影响红色矩形

var cut=[5070100100]
var cut1=[60,85,60,60]
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.rect（截[0]、截[1]、截[2]、截[3]）；
ctx.lineWidth=3；
ctx.strokeStyle='绿色'；
ctx.stroke（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.rect（cut1[0]，cut1[1]，cut1[2]，cut1[3]）；
ctx.lineWidth=3；
ctx.strokeStyle=‘红色’；
ctx.stroke（）；
ctx.closePath（）
您需要清除画布并再次绘制红色矩形


var c=document.getElementById（“画布”）；
c、 宽度=400；
c、 高度=200；
var ctx=c.getContext（“2d”）；
var cut=[50,70,100,100]
var cut1=[60,85,60,60]
函数drawRectangle（切割、填充）{
ctx.beginPath（）；
ctx.rect（截[0]、截[1]、截[2]、截[3]）；
ctx.lineWidth=3；
ctx.strokeStyle=填充；
ctx.stroke（）；
ctx.closePath（）；
}
绘图矩形（切割为“绿色”）；
drawRectangle（切割1，“红色”）；
clear.addEventListener（“单击”，（）=>{
ctx.clearRect（0,0，c.宽度，c.高度）；
drawRectangle（切割1，“红色”）；
});
canvas{display:block；}
清除
在您的情况下，清除和重画是您真正需要的，但为了完整性，要清除任何形状的内容，您可以使用

通过将合成模式设置为destination out，通常应由图形填充的所有像素将实际渲染为透明

因此，要制作一个简单的清晰笔划矩形：


var ctx=canvas.getContext（'2d'）；
ctx.fillStyle='红色'；
ctx.fillRect（20,20,80,80）；
//清楚的
ctx.globalCompositeOperation='destination out'；
ctx.lineWidth=5；
ctx.strokeRect（40,40,30,30）；
//设置回“正常”
ctx.globalCompositeOperation='source over'
用白色笔画同一个正方形？@ChrisLi如果不是白色背景怎么办？：）但是，即使有一个“清晰的线条”功能，它也会使清晰的部分保持白色，除非你在那里画对了什么东西？它会使iirc透明-问题是这不是一条
线条
，但你的评论强调了另一种回答方式。。用lineDraw代替
drawRect
手工绘制矩形。您的右边是透明的，以前不知道，非常感谢！这就解决了我的问题：）但我没想到缺少“clear stroke rect”功能。这将非常有用：P@GustavoPassos它也会很贵。比如这支笔：。这是一个极其复杂的动画。如果转到第549行，您可以看到画布被清除一次（第557行），所有内容都被重新绘制（第551行），即删除所有内容，然后重新绘制。