2

3つのキャンバスA、B、Cがあります。

Aコントロールキャンバスです。スケーリングは方向と方向にB変換さBれますが、Firefoxではスケーリングは方向にのみ変換されます。どの実装が正しいですか？xyx

また、回転していることに注意してCください。Chromeでは完全に見苦しいように見えますが、Firefoxではこれで問題ありません。これを修正するにはどうすればよいですか？

私は最新のChromeとFirefox5を持っています。

コード

$(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

これは、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 を超えるバージョンでは修正されています。

于 2011-07-05T02:13:08.160 に答える
0

クロムで奇妙に見える理由は、context.font の代わりに context.scale を使用しているためです。キャンバスにテキストを描画するときは、context.scale() の代わりに context.font を使用してフォント サイズを大きくすることをお勧めします。スケールを使用すると、標準の font-family/font-size (他のフォントが指定されていない場合) でテキストが描画され、滑らかでない文字になる可能性があります。フォントの詳細については、2d-context 仕様を参照してください。http://www.w3.org/TR/2dcontext/#dom-context-2d-font

私にとって、回転とスケーリングは、chrome、firefox (まだ 5.0 をインストールしていませんが)、opera (スケーリングによる醜さを除いて) で同じように見えます。コードを見ると、正しく動作することがわかります。

編集: FF5 をインストールすると、スケーリングと変換が正しく表示されます

于 2011-07-04T19:51:13.210 に答える