3

fillTextのmaxWidth引数を使用して、テキストがレンダリングされる最大幅を制限できますが、Chromeでは非常に奇妙な結果が得られることがあります。これは、テキストの幅を2、3ピクセルだけ制限する必要がある特に悪い例です。上記は、maxWidthが指定されていないfillTextの呼び出しです。下の例にはmaxWidthがあります。「w」と「a」の間にスペースが大きすぎます。より良い結果を得るためのトリックや回避策はありますか？

例で使用されているコードは次のとおりです。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="8pt Arial";
ctx.fillText("Iowa", 10, 40);
ctx.fillText("Iowa", 10, 56, 21);

（編集：より簡単な再現）再現するには、ここに移動して右下のボックスを見てください。

更新：元の質問では、Firefoxにも問題があったと述べられていました。それはエラーでした。この問題はChromeにのみ存在するようです。

4

1 に答える 1

1

あなたの基本的な問題は、レンダリングされたテキストに対して maxWidth がスケーリングを実行することですが、ほとんどのテキストは非整数サイズにうまくスケーリングされません...基本的に、7.9px​​ フォントを要求すると、ピクセルグリッドにうまく収まらず、醜く見えるでしょう。

それを回避するという点では...より高いDPIディスプレイを使用することを除けば（実際にはあなたの制御下にないことはわかっています）、APIを回避する以外にできることはあまりありません。:(

于 2013-01-09T05:06:02.367 に答える