在文本后面画出褪色的背景/发光

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

“淡出背景”几乎完全描述了阴影，所以使用阴影来获得效果！使用参数进行播放，直到您对结果满意为止：

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/

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/