在画布文本上创建外部笔划而没有内部笔划答案

【问题标题】：Creating an outer stroke on canvas text without having an inner stroke在画布文本上创建外部笔划而没有内部笔划
【发布时间】：2016-06-29 23:37:49
【问题描述】：

我已经看到了在将文本写入画布时通过简单地将笔划加倍（并更改顺序）来模拟外部笔划的选项 (see here)

但是，我正在开发的应用程序允许使用 rgba 颜色。因此，“隐藏”的内部笔划可能会变得可见。这是一个示例：

在本例中，笔触为白色，文本填充为 rgba(0,0,0,0.5)。

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

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

谢谢-

【问题讨论】：

是的，这是可能的。请参阅此答案stackoverflow.com/a/34234589/3877726，它解释了如何使用屏幕外画布和使用遮罩来做到这一点，也可以使用剪切区域来完成。
@Blindman67，我很遗憾没有看到你展示 gCo 遮罩.. 但剪裁仍然不行:)
@Kaiido 我不明白为什么它不起作用，剪辑复杂性没有限制，并且有很多方法可以获取字体的路径数据，例如 SVG 字体。
@Blindman67 是的...只是我猜 OP 不想将他的所有字体都转换为 svg 字体然后为此提取路径数据，因为画布文本不是 Path 对象并且可以'不按原样用于剪辑。
这需要即时完成，并且画布会不断更新，所以我认为创建屏幕外画布是行不通的。不过，我会再研究一下。谢谢@Blindman67

标签： html canvas stroke

【解决方案1】：

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

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

如果您需要查看背景，可以在隐藏的（屏幕外）画布上执行这些步骤，然后在背景顶部绘制结果。

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)}

&lt;canvas id=c width=580&gt;&lt;/canvas&gt;

【讨论】：

谢谢，这很有意义。我正在使用 FabricJS，因此尝试将其改造成其内部渲染方法时遇到了一些麻烦。我会再试一试，看看我是否至少可以创建一个基本的 JS 小提琴。