4

HTML5 キャンバスでテキストを回転させました。Google Chrome 以外のブラウザでは問題なく表示されます。Windows の chrome では歪んで見えます。また、MACでも問題なく表示されます。なぜそうなのですか？Chrome ベータ 20 を使用しています。HTML 5 の問題ですか、それとも Google Chrome または Windows のバグですか? この歪みの問題を解決するにはどうすればよいですか?

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        context.font = "12pt Calibri";
        context.rotate(Math.PI/2.5);
        context.fillText("Competitive Landcaping!", 450, 100);
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="878" height="2000"></canvas>
  </body>
</html>
4

1 に答える 1

3

私は最近、同じヘッドバンギングを経験しました。簡単に言えば、Chrome は Windows ではフォントのレンダリングが非常に悪く、変換されたフォントはそこから悪化するということです。

より長く、より技術的な回答については、次の投稿を確認してください。

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

Chrome で「最悪」に見えないフォントを選択する以外に、やるべきことは何もありません。

于 2012-09-12T00:10:06.207 に答える