javascript - HTML5 Canvas 和丑陋的文字边框

Question

我正在寻找一种在 HTML5 Canvas 中呈现带有黑色边框的白色文本的方法。我没有找到获得漂亮结果的解决方案，尝试了一些不同的方法(阴影、strokeText 等)，结果总是很差(可能是由于 AA)。

这里是我要复制的基础:

你可以在这里看到我的测试:http://jsfiddle.net/7H79m/

ctx.font         = "12px Arial";
ctx.textBaseline = "top"; 
ctx.fillStyle    = "white";
ctx.strokeStyle  = "black";
ctx.lineWidth    = 2;

ctx.strokeText( "HappyEnd", x, y );
ctx.fillText( "HappyEnd", x, y );

如果您知道解决方案，请分享! :)

Answer 1

您将无法通过文本的内置笔划效果获得准确的结果，因为由于子像素化问题，目前在各种浏览器中的文本呈现有点马马虎虎(IMO)(请参阅Chrome 与 FF)。

但是您可以用这种方式模拟笔画(在 FF21 中渲染):

//Force anti-alias
ctx.translate(0.5, 0.5);

//...
//Create stroke effect:
ctx.fillStyle    = "black";
ctx.fillText( "HappyEnd", x-1, y );
ctx.fillText( "HappyEnd", x,   y-1 );
ctx.fillText( "HappyEnd", x+1, y );
ctx.fillText( "HappyEnd", x,   y+1 );

//draw normal text
ctx.fillStyle    = "white";
ctx.fillText( "HappyEnd", x, y );    

完整修改，click here .

当然，您始终可以将“大纲”合并到函数中:

function outlineText(ctx, color, txt, x, y) {
    ctx.fillStyle    = color;
    ctx.fillText( txt, x-1, y );
    ctx.fillText( txt, x,   y-1 );
    ctx.fillText( txt, x+1, y );
    ctx.fillText( txt, x,   y+1 );
}

或者改为扩展 Canvas 上下文:

if (CanvasRenderingContext2D != 'undefined') {
    CanvasRenderingContext2D.prototype.outlineText = 
        function outlineText(txt, x, y) {
            this.fillText( txt, x-1, y );
            this.fillText( txt, x,   y-1 );
            this.fillText( txt, x+1, y );
            this.fillText( txt, x,   y+1 );
        }
}

用法:

ctx.outlineText("HappyEnd", x, y);

查看使用实例 incorporated in your example here .