Html5 Canvas：旋转的文本在 Google Chrome 上看起来失真答案

【问题标题】：Html5 Canvas : Rotated text looks distorted on Google ChromeHtml5 Canvas：旋转的文本在 Google Chrome 上看起来失真
【发布时间】：2012-07-19 13:46:59
【问题描述】：

我在 HTML5 画布中旋转了一个文本。它在除谷歌浏览器之外的所有浏览器上看起来都很好。它在 Windows 上的 chrome 上看起来失真。此外，它在 MAC 上看起来不错。为什么会这样？我正在使用 Chrome beta 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>

【问题讨论】：

标签： windows html google-chrome html5-canvas kineticjs

【解决方案1】：

我最近也经历了同样的头疼。简短的回答是，Chrome 在 Windows 上的字体渲染效果很差，而且转换后的字体从那里变得更糟。

要获得更长、更技术性的答案，请查看此帖子：

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

除了尝试选择在 Chrome 中看起来“最差”的字体之外，没有什么可做的。

【讨论】：