web-dev-qa-db-ja.com

HTML5のキャンバスを使用して外側のストロークでテキストを描画する

現在、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);
};

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

enter image description here

javascripthtmlcanvashtml5-canvas
14
ndg

脳卒中の何が問題になっていますか？ストロークの半分が形状の外側になるため、いつでも最初にストロークを希望の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);
_

これは：

enter image description here

ここでライブフィドル： http://jsfiddle.net/vNWn6/

小さいテキストレンダリングスケールでは正確に見えない場合は、いつでも大きく描くことができますが、縮小することができます（上記の場合はctx.scale(0.25, 0.25)を実行します）

44
Simon Sarris

サイモンの答えは良い解決策ですが、場合によっては、特に大文字の「M」、「V」、「W」の場合、マイターグリッチが発生する可能性があります。

drawStroked("MVW", 50, 150);

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

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

ctx.miterLimit=2;

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

頑張ってください！

24
Jackalope

滑らかな影のためにあなたはこれを試すことができます

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();
3
Abaybay De Abaycious

上記の答えは素晴らしいです。これらのソリューション*のいくつかと私自身のアイデアのいくつかを使用して、以下のフィドルでクイックリファレンスといくつかの創造的な代替案を作成しました。

*フィドルコードの期日までに与えられたすべてのクレジット

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/

フィドルの出力：

Output of the below fiddle

サポート対象：

  • アウトラインテキスト
  • シャドウテキスト
  • 輝くテキスト
  • ぼやけたテキスト
  • 反映されたテキスト

いくつかのパフォーマンスメトリック：

これをゲームや高フレームレートで使用することを検討していますか？上記のメソッドを使用して、これjsperfを確認してください。

https://jsperf.com/various-text-effects-html5-2d-context

2
aaronedmistone