在没有内部笔划的情况下在画布文本上创建外部笔划

Question

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

但是，我正在使用的应用程序允许使用rgba颜色。因此，隐藏＆＃34;隐藏＆＃34;内部笔划变得可见。这是一个示例：

在此示例中，笔划为白色，文本填充为rgba（0,0,0,0.5）。

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

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

谢谢 -

Answer 1

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;