2

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

A是控制画布。B你会注意到缩放在方向上平移，但B在Firefox 中缩放仅在方向上平移。哪个实现是正确的？xyx

还要注意旋转的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>

可以在这里找到一个工作示例

4

2 回答 2

0

The reason why it looks wierd in chrome is because you use context.scale instead of context.font. When drawing text in canvas i suggest you use the context.font to increase the font size instead of context.scale(). When using scale it draws the text with the standard font-family/font-size (if no other font have been specified) which can result in a non-smooth character. For more information about font see 2d-context spec. http://www.w3.org/TR/2dcontext/#dom-context-2d-font

For me the rotation and scaling looks the same in chrome, firefox (though I havent istalled 5.0 yet) and opera (Except the uglyness that comes from scaling). Looking at the code I quite sure it acts correctly.

EDIT: Installed FF5 now and it scale and translate looks correct

于 2011-07-04T19:51:13.210 回答
0

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

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

于 2011-07-05T02:13:08.160 回答