Question

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

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

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

Answer 1

下面的示例有两个画布。 Unit只有一些文字。然后我用＆＃34;红色＆＃34;填充ssh user@ip mysqldump --all-databases > dump.sql画布。并使用background foreground删除像素。我还将alpha设置为0.5，并删除一些像素。

＆＃13;

globalCompositeOperation

＆＃13;

"destination-out"

＆＃13;

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";

＆＃13;

HTML Canvas透明笔触线

1 个答案: