绘制与外部行程文本与HTML5的画布(Drawing text with an outer stro

我目前使用HTML5的画布渲染一些使用方法fillText方法字符串。这工作得很好，但我也想给每个字符串1px的黑色外行程。不幸的是，strokeText功能似乎适用的内部冲程。为了解决这个问题，我已经写了实现了我的后效应的drawStrokedText功能。不幸的是它的可怕缓慢的（原因很明显）。

有没有达到使用本机的画布功能1px的外中风的快速，跨浏览器的方式？

drawStrokedText = function(context, text, x, y)
{
    context.fillStyle = "rgb(0,0,0)";
    context.fillText(text, x-1, y-1);
    context.fillText(text, x+1, y-1);
    context.fillText(text, x-1, y);
    context.fillText(text, x+1, y);
    context.fillText(text, x-1, y+1);
    context.fillText(text, x+1, y+1);

    context.fillStyle = "rgb(255,255,255)";
    context.fillText(text, x, y);
};

下面是在工作时的效果的例子：

Answer 1:

这有什么错中风？由于一半的行程将是外面的形状，你总是可以先用双线宽画笔画你想要什么。所以，如果你想要一个4PX外行程，你可以这样做：

function drawStroked(text, x, y) {
    ctx.font = '80px Sans-serif';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 8;
    ctx.strokeText(text, x, y);
    ctx.fillStyle = 'white';
    ctx.fillText(text, x, y);
}


drawStroked("37°", 50, 150);

这使得：

住在这里小提琴： http://jsfiddle.net/vNWn6/

如果出现这种情况不要看小的文字渲染秤准确，你可以随时绘制大，但其缩小（在上述情况下，你会怎么做ctx.scale(0.25, 0.25)

Answer 2:

西蒙的回答是一个很好的解决方案，但它可能有斜切毛刺在某些情况下，特别是与资本“M”，“V”，和“W”：

drawStroked("MVW", 50, 150);

http://jsfiddle.net/hwG42/1/

在这种情况下，这是最好的利用：

ctx.miterLimit=2;

http://jsfiddle.net/hwG42/3/

祝您好运！

Answer 3:

对于光影你可以试试这个

ctx.beginPath();
ctx.fillStyle = 'white';
ctx.font = "bold 9pt Tahoma";
ctx.shadowBlur = 3;
ctx.textAlign = "center";
ctx.shadowColor = "#000000";
ctx.shadowOffs = 0;                 
ctx.fillText('www.ifnotpics.com', 100, 50);        
ctx.closePath();

Answer 4:

以上答案都是伟大的，使用这些解决方案的*和一些我自己的想法，我做了一个快速参考，并在下面捣鼓一些有创意的替代品。

*所有学分给出，其中到期的小提琴代码

drawStrokedText   ( text, x, y );
drawShadowedText  ( text, x, y, shadowBlur);
drawGlowingText   ( text, x, y, glowColorHex, glowDistance);
drawBlurredText   ( text, x, y, blurAmount);
drawReflectedText ( text, x, y, reflectionScale, reflectionOpacity);

https://jsfiddle.net/vtmnyea8/