Нарисуйте блеклый фон / свечение за текстом

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/