色あせた背景/テキストの後ろに白を描く

Question

HTML5キャンバスに背景を含む文字列を描画しようとしています。私は（ラボの設定ページから）この写真を見る、例としてGmailのファビコンを使用しています：絵で

あなたが見ることができるように、図8は、その周りの白い輝きを持っています。ここで私はこれまで試したものです：

var notstring = notifications.toString(); 
var xpos = 14; 
xpos -= (5 * notstring.length); 

//Draw background 
ctx.font = "15px sans-serif"; 
ctx.globalAlpha = 0.5; 
ctx.fillStyle = "white"; 
//ctx.fillRect(xpos, 9, (5 * notstring.length) + 2, 7); 
ctx.fillText(notstring, xpos - 1, 17); 

//Draw text 
ctx.font = "10px sans-serif"; 
ctx.globalAlpha = 1; 
ctx.fillStyle = "black"; 
ctx.fillText(notstring, xpos, 15); 

あなたは、私が良く見えませんでしたその背後にある四角形を描画しようとした、異なるフォントサイズでテキスト、これは良く見えたが、見ることができるようにフェージングを与えなかった。

Answer 1

「フェードアウトされた背景」は、ほぼ正確にシャドウを表しているので、その効果を得るためにシャドウを使用してください。

ctx.shadowColor = 'red'; 
ctx.shadowOffsetX = 0; 
ctx.shadowOffsetY = 0; 
ctx.shadowBlur = 5; 

http://jsfiddle.net/ksrfY/5/

：

http://jsfiddle.net/ksrfY/

ctx.shadowColor = 'lime'; 
ctx.shadowOffsetX = 1; 
ctx.shadowOffsetY = 1; 
ctx.shadowBlur = 8; 

ctx.font = '20pt Verdana'; 
ctx.fillText('8', 50, 50); 

のように、 "完璧な" 背景で0,0へのオフセットを設定します。あなたは結果に満足しているまで、パラメータを指定して再生します

Answer 2

シャドウのみでは、テキストをエッジから非常に遠くに「押し込む」ことはできません。不透明度が急激に低下して効果的になります。

私は個人的にしっかりとそれを充填する前に、半透明の境界線とテキストの周りのストロークを使用することをお勧めします：

ctx.strokeStyle = "rgba(255,255,255,0.4)"; // 40% opaque white 
ctx.lineWidth = 10;      // A nice fat border 
ctx.strokeText(notstring, xpos, 15); 

ctx.fillStyle = "black"; 
ctx.fillText(notstring, xpos, 15); 

あなたもあなたはまだ使用できる邪魔するストロークの「ハード」のエッジを見つけた場合それを少し柔らかくするために影のぼかし。 （それはまた、その下に影を持つことになりますので）あなたはストロークの不透明度をドロップする必要があります：

ctx.shadowColor = 'red';    // full red shadow 
ctx.strokeStyle = 'rgba(255,0,0,0.2)'; // 20% opaque red 
ctx.shadowBlur = 8;     // soft edge 
ctx.lineWidth = 9;     // wide border 
ctx.strokeText(notstring, xpos, 15); 
ctx.shadowBlur = 0;     // turn off shadow before filling 
ctx.fillText(notstring, xpos, 15); 

あなただけの影、ちょうど脳卒中、ここ組み合わせを比較したライブデモを見ることができます：
http://jsfiddle.net/ksrfY/11/