分类导航

wordpress 发布时间：2022-04-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了windows – Html5 Canvas：旋转的文字在Google Chrome上看起来很扭曲，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_675_0@

概述

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

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