javascript - How to achieve this text shadow in canvas text - Stack Overflow

admin管理员组

文章数量:1430967

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>

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>

How to apply this text shadow in the canvas text. I searched for various ways like this (http://jsfiddle/DirkWeber/nnqc8/1/light/) and I'm not able to replicate this type of text shadow in canvas text. Please let me know how to achieve this.

• javascript
• css
• html
• canvas

Share Improve this question Follow edited Jun 4, 2018 at 5:34 Cœur 38.8k2525 gold badges206206 silver badges279279 bronze badges asked Feb 20, 2017 at 2:41 AshokkumarAshokkumar 32544 silver badges1818 bronze badges 1

• Use a mixture of shadowing, fill color, stroke color and stroke width to approximate your effect ... Adjust as needed for font size – markE Commented Feb 20, 2017 at 4:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

<canvas id="c" width="300" height="130"></canvas>

CSS example

.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>

本文标签： javascriptHow to achieve this text shadow in canvas textStack Overflow