html - 在文本后面绘制褪色背景/发光

Question

我正在尝试在 HTML5 Canvas 上绘制带有背景的字符串。我以 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

“淡出背景”几乎准确地描述了阴影，所以使用阴影来获得这种效果!调整参数直到您对结果满意为止:

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 以获得“完美”背景，例如:

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

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