Javascript 使用不透明度的文本阴影模拟均匀的外部笔划

有点奇怪的是，2019年还没有一种标准且简单（且独立于浏览器）的方式使用CSS在文本外部添加笔划效果。我们确实有

-webkit文本笔划

，但它似乎非常依赖于浏览器，而且出于某种奇怪的原因，笔划集中在文本的边界周围，而不是在文本的外部，如图所示

因此，我试图基于无处不在的

文本阴影

属性实现模拟笔划效果，但为了实现良好的平滑笔划效果，即使是宽笔划（以避免阴影之间的间隙），我使用的不仅仅是四个阴影，而是许多阴影，如中所示，代码如下：

var element = document.getElementById('random-text');
var strokeWidth = 2.3;
var strokeColor = 'rgba(0,0,0,0.5)';
var strokePart = '';
var increment = 0.1 * 1/strokeWidth;
increment = increment > 0.25 ? 0.25 : increment;
increment = increment * 2*Math.PI;
for (var angle = 0; angle < 2*Math.PI; angle += increment) {
    strokePart = strokePart + (angle > 0 ? ', ' : '') + (Math.cos(angle) * strokeWidth).toFixed(2) + 'px ' + (Math.sin(angle) * strokeWidth).toFixed(2) + 'px 0px ' + strokeColor;
}
style = 'text-shadow: ' + strokePart+ ';';
element.setAttribute('style', style);

var-element=document.getElementById（'random-text'）；
var strokeWidth=2.3；
var strokeColor='rgba（0,0,0,0.5）'；
var strokePart=''；
var增量=0.1*1/冲程宽度；
增量=增量>0.25？0.25：增量；
增量=增量*2*Math.PI；
对于（变量角度=0；角度<2*Math.PI；角度+=增量）{
strokePart=strokePart+（角度>0？），'：''）+（数学cos（角度）*strokeWidth.toFixed（2）+“px”+（数学sin（角度）*strokeWidth.toFixed（2）+“px 0px”+strokeColor；
}
样式='文本阴影：'+strokePart+'；'；
元素。setAttribute（'style'，style）；

除了由许多重叠阴影组成，笔划的最终不透明度基本上是

1.0

或接近该值之外，该方法效果良好。但是我希望笔划的不透明度是一个可设置的变量

我可以降低每个子阴影的不透明度（即，

strokeColor

），这样当它们分层时，累积不透明度就是我想要的，但我的感觉是最好让不透明度最大值在

1.0

（设置

strokeColor

为

1.0

不透明度），然后在末尾向下拨到你想要的值。否则，可能会在笔划周围看到间隙和/或可变不透明度

有没有一个简单的方法来实现这一点

---

我们可以设置文本元素的

不透明度

，但这也会改变文本的不透明度。为了克服这一点，我们可以创建原始文本元素的克隆，将笔划添加到该元素上（使用新的不透明度），然后将原始（未排序）文本放在顶部，但如果文本本身部分透明，则可以看到下面的文本。也许先将“笔划”层中文本的不透明度设置为零不透明度？但这一切都变得有点复杂，因为这应该是一个非常简单的笔划效果

这个：@RandyCasburn我以前读过那篇文章，但我不知道如何应用它来解决我提到的问题。对我的JSFIDLE进行修改会非常方便，最好只修改javascript部分而不修改单独的css部分，因为我需要应用它的上下文。你说：使用CSS在文本外部添加笔划效果，然后说我的建议在你的评论中不起作用，因为要解决我提到的问题？请原谅我的困惑，但问题到底是什么？问题是如何在我上面的实现中改变阴影的不透明度，阴影由多个阴影混合在一起形成模拟笔划：在我上面的实现中；知道了。在我看来，你已经把简单的东西复杂化了，有四行CSS使用rgba（）设置不透明度。祝你好运。这个：@RandyCasburn我以前读过那篇文章，但我不知道如何应用它来解决我提到的问题。对我的JSFIDLE进行修改会非常方便，最好只修改javascript部分而不修改单独的css部分，因为我需要应用它的上下文。你说：使用CSS在文本外部添加笔划效果，然后说我的建议在你的评论中不起作用，因为要解决我提到的问题？请原谅我的困惑，但问题到底是什么？问题是如何在我上面的实现中改变阴影的不透明度，阴影由多个阴影混合在一起形成模拟笔划：在我上面的实现中；知道了。在我看来，你已经把简单的东西复杂化了，有四行CSS使用rgba（）设置不透明度。祝你好运。