3

http://jsfiddle.net/qcVAV/で確認できる HTML5 Canvas でのテキスト レンダリングに問題があります。

Firefox と Internet Explorer はテキストを測定して一貫して入力しているようですが、Chrome はそうではありません。

提供されたリンクでは、Internet Explorer と Firefox が同じように表示され、measureText 呼び出しは、提供されたテキストが 1679 に測定されていることを示しています。Firefox では、さらに精度が高くなります。ただし、Chrome の場合、テキストは 1651 まで測定されます。

css リセットhttp://cssreset.comを追加してみました- おそらく css が問題を引き起こしているのではないかと思ったからです。

テキストを一貫してレンダリングするために他に何ができますか?

4

1 に答える 1

2

申し訳ありませんが、あなたはここで運が悪いです ！

テキストはブラウザごとに異なる方法で測定されるだけでなく、スケーリングやレンダリングも大きく異なります。フォント サイズを 4 倍し、スケールを 4 倍してみると、驚くような結果になるかもしれません。一部のブラウザーではカーニングがオフになり、スケールがまったく適用されていない場合、Opera は見栄えが悪くなります。

一貫性を保つ唯一の方法measureTextは、事前に計算することです。

一貫性を保つ唯一の方法fillTextは、テキストの代わりに画像を使用することです。とにかく、それは速くなければなりません。

テキストが非常に動的である場合、これらはどちらも受け入れられませんが、アプリで 100 未満の異なるテキストを書くだけの場合は、おそらく画像が最善の策です.

于 2012-09-18T01:28:45.063 に答える