如何在画布文本中实现此文本阴影

【问题标题】：How to achieve this text shadow in canvas text如何在画布文本中实现此文本阴影
【发布时间】：2018-06-04 13:34:40
【问题描述】：

textarea
{text-shadow:white 0px 1px 0px, white 0px -1px 0px, white -1px 0px 0px, white 1px 0px 0px, white -1px 1px 0px, white 1px 1px 0px, white -1px -1px 0px, white 1px -1px 0px, white 0px 1.5px 0px, white 0px -1.5px 0px, white -1.5px 0px 0px, white 1.5px 0px 0px, white -1.5px 1.5px 0px, white 1.5px 1.5px 0px, white -1.5px -1.5px 0px, white 1.5px -1.5px 0px, rgb(133, 133, 133) 0px -1px 4px, rgb(133, 133, 133) 0px 3px 4px, rgb(133, 133, 133) 3px 0px 4px, rgb(133, 133, 133) -3px 0px 4px;
color:red;
}

<textarea >default text in the textarea
</textarea>

如何在画布文本中应用此文本阴影。我搜索了像(http://jsfiddle.net/DirkWeber/nnqc8/1/light/) 这样的各种方式，但我无法在画布文本中复制这种类型的文本阴影。请告诉我如何实现这一目标。

【问题讨论】：

对approximate your effect使用阴影、填充颜色、描边颜色和描边宽度的混合...根据需要调整字体大小

标签： javascript css html canvas

【解决方案1】：

Canvas example

var canvas = document.getElementsByTagName("canvas")[0],
    ctx = canvas.getContext('2d');

ctx.font="75px verdana";
ctx.shadowColor="black";
ctx.shadowBlur=10;
ctx.lineWidth=10;
ctx.strokeStyle = "white";
ctx.strokeText("HELLO",25,100);
ctx.shadowBlur=0;
ctx.fillStyle="red";
ctx.fillText("HELLO",25,100);

&lt;canvas id="c" width="300" height="130"&gt;&lt;/canvas&gt;

CSS 示例

.text {font-size: 3em;
  -webkit-text-stroke: 2px white;
  -webkit-text-fill-color: black;
  -webkit-animation: fill 1s infinite alternate;
text-shadow:2px 2px 10px #000;
}

<div class="text">default text in the textarea
</div>

【讨论】：

不完全是。但是您将如何实现呢？
我可以帮你弄清楚你想做什么。