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

发布时间：2020-12-14 05:25:58 所属栏目：Windows 来源：网络整理

导读：我在 HTML5画布中旋转了一个文本.它在除谷歌浏览器之外的所有浏览器上看起来都很好.它看起来在Windows上的chrome上扭曲了.此外,它在MAC上看起来很好.为什么会这样？我使用的是Chrome测试版20.是HTML 5问题还是某些Google Chrome或Windows错误？我该如何解决

我在 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>

解决方法

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!