在没有内部笔划的 canvas 文本上创建外部笔划

Question

我看到了在将文本写入 canvas (see here)

时通过简单地加倍笔画（并更改顺序）来模拟外部笔画的选项

但是，我正在开发的应用允许使用 rgba 颜色。因此，"hidden" 内部笔画可能会变得可见。这是一个示例：

本例中，描边为白色，文字填充为rgba(0,0,0,0.5)。

这样就可以看到隐藏的白色内划线了。是否可以在没有内部的情况下应用外部笔画？如果没有，是否可以对笔画应用剪贴蒙版之类的东西，以防止在文本填充不透明的情况下内部可见？

我觉得我知道这里的答案，但希望有人能有一个聪明的解决方案。

谢谢-

Answer 1

通过使用简单的合成操作序列，您可以通过以下步骤获得结果：

使用目标颜色描边文本
将合成模式更改为destination-out
使用任何纯色填充。这会破坏内部。
将合成模式更改为source-over
使用目标颜色和 alpha 再次填充

如果你需要看穿背景，你可以在隐藏的（屏幕外）canvas 上执行这些步骤，然后在背景之上绘制结果。

var ctx = c.getContext("2d");
ctx.font = "128px sans-serif";
ctx.textBaseline = "top";
ctx.lineJoin = "round";
ctx.strokeStyle = "#fff";
ctx.lineWidth = 11;

ctx.strokeText("MY TEXT", 10, 10);                 // stroke
ctx.globalCompositeOperation = "destination-out";  // will delete what's under
ctx.fillText("MY TEXT", 10, 10);                   //   on next draw
ctx.globalCompositeOperation = "source-over";      // normal comp. mode
ctx.fillStyle = "rgba(0,0,0,0.5)";                 // draw in target fill/color
ctx.fillText("MY TEXT", 10, 10);

#c {background:rgb(55, 68, 236)}

<canvas id=c width=580></canvas>

在没有内部笔划的 canvas 文本上创建外部笔划

Creating an outer stroke on canvas text without having an inner stroke

html

canvas

stroke