Question

我正在寻找一种在HTML5画布中渲染带有黑色边框的白色文字的方法。我没有找到一个解决方案来获得漂亮的结果，尝试一些不同的方式（阴影，strokeText，...），总是得到一个糟糕的结果（可能是由于AA）。

这里是我要复制的基础：

original I want to copy

您可以在此处查看我的测试：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中渲染）：

snapshot FF/v21

//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 );
}

或者扩展画布上下文：

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。

Answer 2

[编辑尝试不同的效果]

尝试使用多个阴影来固化AA

http://jsfiddle.net/m1erickson/BSU7P/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas = document.getElementById('canvas');
    var ctx    = canvas.getContext('2d');

    // Load background
    var bg = new Image();
    bg.onload = function() {
        canvas.width  = this.width;
        canvas.height = this.height;
        ctx.drawImage(this, 0, 0);
        process();
    };
    bg.src = "http://upload.robrowser.com/bg-test-text.jpg";


    function process() {
        var x = canvas.width /2;
        var y = canvas.height/2;

        ctx.font="12px Arial";

        try1(x,y);
        try2(x,y+20);
    }

    function try1(x,y){
    multiShadow("HappyEnd",x,y,0,-1,0);
    multiShadow("HappyEnd",x,y,0,1,0);
    multiShadow("HappyEnd",x,y,-1,0,0);
    multiShadow("HappyEnd",x,y,1,0,0);
    ctx.fillStyle="white";
    ctx.strokeStyle="black";
    ctx.strokeText("HappyEnd",x,y);
    ctx.fillText("HappyEnd",x,y);
    }

    function try2(x,y){
    multiShadow("HappyEnd",x,y,0,-1.5,8);
    multiShadow("HappyEnd",x,y,0,1.5,8);
    multiShadow("HappyEnd",x,y,-1.5,0,8);
    multiShadow("HappyEnd",x,y,1.5,0,8);
    ctx.fillStyle="white";
    ctx.fillText("HappyEnd",x,y);
    }


    function multiShadow(text,x,y,offsetX,offsetY,blur){
        ctx.textBaseline = "top"; 
        ctx.lineWidth    = 1;
        ctx.shadowColor = '#000';
        ctx.shadowBlur    = blur;
        ctx.shadowOffsetX = offsetX;
        ctx.shadowOffsetY = offsetY;
        ctx.fillStyle="black";
        ctx.fillText( "HappyEnd", x, y ); 
    }

}); // end $(function(){});
</script>

</head>

<body>

    <canvas id="canvas" width=300 height=300></canvas>

</body>
</html>

Answer 3

总是模糊不清：

ctx.shadowColor = "#000";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 5;

Answer 4

这是我的尝试。我基本上试图将笔划缩小1个像素并使笔划在填充内。唯一的问题是难以集中所有

// Create canvas, add it to body.
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

// Load background
var bg = new Image();
bg.src = "http://upload.robrowser.com/bg-test-text-original.jpg";
bg.onload = function () {
    canvas.width = this.width;
    canvas.height = this.height;
    ctx.drawImage(this, 0, 0);
    process();
};

// Do whatever you want here
function process() {
    var x = 62;
    var y = 30;

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

    ctx.font = "11.75px Arial";
    ctx.strokeText("HappyEnd", x, y);

    ctx.font = "12px Arial";
    ctx.fillText("HappyEnd", x, y);
}

HTML5 Canvas和丑陋的文本边框

4 个答案: