Question

我在HTML5画布中旋转了一个文本。它在除谷歌浏览器之外的所有浏览器上看起来都很好。它看起来在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>

Answer 1

我最近经历了同样的头撞。简短的回答是Chrome在Windows上渲染字体非常糟糕，而且转换后的字体也会变得更糟。

有关更长，更技术性的答案，请查看此帖：

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

除了尝试选择Chrome中看起来“最差”的字体外，没有一件事可做。

Html5 Canvas：旋转的文字在Google Chrome上看起来很扭曲

1 个答案: