在 Chrome 中绘制文本的陷阱

Posted 2023-03-24

【中文标题】在 Chrome 中绘制文本的陷阱

【英文标题】：Drawing text gotchas in Chrome

【发布时间】：2011-09-28 07:32:03

【问题描述】：

它有三个画布 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找到一个工作示例

【参考方案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，它的缩放和翻译看起来正确

【讨论】：

没关系，我针对 Chrome 提交了两个错误：t.co/pZaMjew 和 t.co/eqUkhv5。处理扩展场景的错误应该是真正的错误。

【参考方案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 之后的任何内容。

【讨论】：

这看起来不是我的问题。在我的情况下，文本也有一些“幻像”缩放。

在 Chrome 13 中看起来仍然很奇怪吗？您链接到的示例在我的机器上看起来是正确的 13.0.782.10 m

好吧，我没有尝试 Chrome13。什么时候发布？

我现在在 Chrome 14 开发者频道，也就是说 Chrome 13 处于 beta 频道，这意味着它应该在 6 个月内发布到稳定频道。

实际上按照他们的进度可能需要一个月：en.wikipedia.org/wiki/Google_Chrome#Release_history