HTML Canvas透明描边线

Question

我想清除某些画布区域中的描边矩形。 我最初的想法是，我只需要使用相同的参数再次调用context.strokeRect函数，然后将strokeStyle更改为transparent 。 但是，它不起作用。 为什么以及如何解决？ 请注意，我只想清除矩形的笔触（边界），而不要清除里面的所有内容。

编辑：我只想清除边框，而不是里面的所有内容，所以我不能使用clearRect()方法。 另外，我无法清除整个画布并重新绘制它，因为画布包含动画。

JS小提琴： https : //jsfiddle.net/47okok8s/

Answer 1

下面的示例有两个画布。 background只是一些文本。 然后，将foreground画布填充为“红色”，并使用globalCompositeOperation "destination-out"来删除像素。 我还将alpha设置为0.5，并移除了一些像素。

 const ctxB = background.getContext("2d"); const ctxF = foreground.getContext("2d"); ctxB.textAlign = "center"; ctxB.textBaseline = "middle"; ctxB.font ="20px arial"; ctxB.fillText("Some Background text",150,25); ctxB.fillText("Some Background text",150,75); ctxB.fillText("Some Background text",150,125); ctxF.lineJoin = "round"; ctxF.fillStyle = "red"; ctxF.fillRect(0,0,300,150); ctxF.lineWidth = 8; ctxF.globalCompositeOperation = "destination-out"; ctxF.strokeRect(25,25,250,100); ctxF.fillRect(75,50,150,50); ctxF.globalAlpha = 0.5; ctxF.fillRect(65,40,170,70); ctxF.globalCompositeOperation = "source-over"; 

 canvas { position : absolute; top : 0px; left: 0px; } 

 <canvas id = "background"></canvas> <canvas id = "foreground"></canvas>