2017-02-20 68 views
2

如何在畫布上的文字達致這文字陰影

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/),我無法在畫布文本中複製這種類型的文字陰影。請讓我知道如何做到這一點。

+0

使用陰影,填充顏色,筆畫顏色和筆畫寬度的混合[近似您的效果](https://jsfiddle.net/r2apkwh0/1/)...根據需要調整字體大小 – markE

回答

3

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例如

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

+0

不完全。但你將如何實現這一目標? – Ashokkumar

+0

我可以幫你澄清你想要做什麼。 – cnsvnc

+0

喜歡這個。 https://jsfiddle.net/5wh3mjpz/你能幫忙嗎? – Ashokkumar