11

HTML5 キャンバスに大きなテキストを、境界線の色(線の色) を赤、塗りつぶしの色を緑で書きたいと考えています。

ストローク幅を 5px にします。

を260px 未満に設定すると問題font sizeありませんでした。

ここに私の最初のコードhttp://jsfiddle.net/8Zd7G/があります:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="240px Calibri";
ctx.strokeStyle = "F00"; //Red
ctx.fillStyle = "0F0"; //Green
ctx.lineWidth = 5;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

ここに画像の説明を入力

しかし、 を260 px 以上font sizeに設定すると、テキストの境界線/ストロークが適切に色付けされません。赤い色で塗りつぶされていない赤い境界線がありました。

ここに私の2番目のコードhttp://jsfiddle.net/Pdr7q/があります:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="260px Calibri";
ctx.strokeStyle = "F00";
ctx.fillStyle = "0F0";
ctx.lineWidth = 5;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

ここに画像の説明を入力

私の質問は、大きなフォント サイズで適切なテキスト ストーク フィルを取得する方法です (2 番目の画像ではなく最初の画像のように)。前もって感謝します ：）

4

3 に答える 3

1

フォント サイズが 256 ピクセルを超える Chrome の既知の問題です (スケーリングを含む):
https://code.google.com/p/chromium/issues/detail?id=280221

現時点では、この問題の解決策はないようですが、スレッド (上記のリンク) に従って、後で状況を確認してください (最後の更新は 10 月 25 日)。

問題はまだありますが、線幅を減らすことで問題を減らすことができます。

もう 1 つのオプションは、半分のサイズ (サイズが 256 未満になるように) を一時的なキャンバスに描画し、次にこのキャンバスを必要なサイズにスケーリングされたメインに描画することです。テキストがよりぼやけますが、私が信じている巻き毛のバージョンよりも見栄えが良くなります.

Firefox には関連するバグ (大きなサイズでのずれ) があります:
https://bugzilla.mozilla.org/show_bug.cgi?id=909873

于 2013-12-05T12:06:47.547 に答える
0

問題は、使用しているフォントファミリに関連している可能性があると思います:「Calibri」

私はubuntu（Chrome 27）でChromeを使用していますが、ここにはカリブリがありませんが、Arialでテストしましたが、これはうまく機能しています（フォントサイズが360pxで、あなたのものよりも大きいことに注意してください）：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = '360px Arial';
ctx.strokeStyle = "#F00";
ctx.fillStyle = "#0F0";
ctx.lineWidth = 5;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

デモ：

JSFiddle

于 2013-12-05T11:26:56.733 に答える