在 Chrome 中绘制文本的陷阱

Question

它有三个画布 A、B 和 C。

A 是控制画布。在B 中，您会注意到缩放在x 和y 方向上转换B，但在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()。使用缩放时，它会使用标准字体系列/字体大小（如果未指定其他字体）绘制文本，这可能会导致字符不平滑。有关字体的更多信息，请参阅 2d-context 规范。 http://www.w3.org/TR/2dcontext/#dom-context-2d-font

对我来说，旋转和缩放在 chrome、firefox（虽然我还没有安装 5.0）和 opera（除了缩放带来的丑陋）中看起来是一样的。查看代码，我很确定它运行正确。

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

Answer 2

这是我在三月份发现的一组文本错​​误。已经报道过：

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 之后的任何内容。