Question

它有三个画布A，B和C.

A是控件画布。在B中，您会注意到缩放会在B和x方向上翻译y，但在Firefox缩放中只会在x方向进行翻译。哪种实现是正确的？

还要注意旋转的C。在Chrome中它看起来很丑陋，但在Firefox中看起来很好。我该如何解决这个问题？

我有最新的Chrome和Firefox 5.

代码

$(function() {
  $('canvas').each(function(i) {
    var c = $(this);
    c.attr('height', '200px');
    c.attr('width', '200px');
    c.css('border', '1px solid black');
    var ctx = c.get(0).getContext('2d');
    switch (i) {
      case 0:
        ctx.translate(100, 100);
        ctx.fillText('A', 0, 0);
        break;
      case 1:
        ctx.translate(100, 100);
        ctx.scale(16, 16);
        ctx.fillText('B', 0, 0);
        ctx.scale(1 / 16, 1 / 16);
        ctx.fillText('o', 0, 0);
        break;
      case 2:
        ctx.translate(100, 100);
        ctx.scale(16, 16);
        ctx.rotate(1);
        ctx.fillText('C', 0, 0);
        ctx.rotate(-1);
        ctx.scale(1 / 16, 1 / 16);
        ctx.fillText('o', 0, 0);
        break;

    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>

可以找到一个工作示例here

Answer 1

它在chrome中看起来很奇怪的原因是因为你使用了context.scale而不是context.font。在画布中绘制文本时，我建议您使用context.font来增加字体大小而不是context.scale（）。使用缩放时，它使用标准font-family / font-size（如果未指定其他字体）绘制文本，这可能导致不平滑的字符。有关字体的更多信息，请参阅2d-context规范。 http://www.w3.org/TR/2dcontext/#dom-context-2d-font

对我来说，旋转和缩放在chrome，firefox中看起来是一样的（尽管我还没有使用5.0）和opera（除了缩放带来的丑陋）。看看代码，我确信它的行为是正确的。

编辑：现在安装了FF5，它的缩放和翻译看起来正确

Answer 2

这是我在3月份发现的一组文本错误。已有报道：

http://code.google.com/p/chromium/issues/detail?id=76061&can=1&q=simonsarris&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS

它已在较新版本的Chrome中修复，特别是在13.0.782.10 m之后的任何内容。

在Chrome中绘制文字陷阱

2 个答案: