25

現在、HTML5 のキャンバスを使用して、fillText メソッドを使用して多数の文字列をレンダリングしています。これは問題なく動作しますが、各文字列に 1 ピクセルの黒い外側のストロークも付けたいと思います。残念ながら、 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);
};

効果の例を次に示します。

ここに画像の説明を入力

4

4 に答える 4

66

脳卒中の何が問題になっていますか？ストロークの半分は形状の外側になるため、いつでも最初にストロークを希望の2倍の線幅で描くことができます。したがって、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)）

于 2012-11-29T23:43:45.143 に答える
28

サイモンの答えは良い解決策ですが、場合によっては、特に大文字の「M」、「V」、および「W」を使用すると、留め継ぎの不具合が発生する可能性があります。

drawStroked("MVW", 50, 150);

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

この場合、以下を利用するのが最善です。

ctx.miterLimit=2;

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

頑張ってください！

于 2014-03-07T20:16:09.933 に答える