1

HTML5 キャンバスに黒い枠線で白いテキストをレンダリングする方法を探しています。きれいな結果を得るための解決策が見つかりませんでした。いくつかの異なる方法 (シャドウ、ストロークテキストなど) を試してみましたが、常に悪い結果が得られました (おそらく 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 );

解決策を知っている場合は、共有してください。:)

4

4 に答える 4

2

サブピクセル化の問題により、テキストのレンダリングは現在、さまざまなブラウザーで少しまあまあ (IMO) であるため、テキストに組み込みのストローク効果を使用して正確な結果を達成することはできません (Chrome と FF を参照)。 ）。

ただし、この方法でストロークをシミュレートできます (FF21 でレンダリング)。

スナップショット 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 );

完全な変更については、ここをクリックしてください。

もちろん、いつでも「アウトライン」を関数に組み込むことができます。

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

ここであなたの例に組み込まれた使用例を実際に見てください。

于 2013-04-08T08:10:27.323 に答える
0

まあ、常にぼやけています：

ctx.shadowColor = "#000";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 5;
于 2013-04-07T19:14:16.523 に答える
0

これが私の試みです。私は基本的に、ストロークを 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);
}
于 2013-04-07T19:35:06.807 に答える