Рисование текста попало в Chrome

Question

Имеет три холста А, В и С.

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>

Рабочий пример можно найти здесь

Answer 1

Это из набора текстовых ошибок, которые я обнаружил еще в марте.Уже сообщалось:

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 м.

Answer 2

Причина, по которой он выглядит странно в chrome, заключается в том, что вы используете context.scale вместо context.font.При рисовании текста на холсте я предлагаю вам использовать context.font для увеличения размера шрифта вместо context.scale ().При использовании масштаба он рисует текст со стандартным семейством шрифтов / размером шрифта (если не указан другой шрифт), что может привести к появлению негладкого символа.Для получения дополнительной информации о шрифте см. 2d-context spec.http://www.w3.org/TR/2dcontext/#dom-context-2d-font

Для меня вращение и масштабирование выглядят одинаково в chrome, firefox (хотя я еще не установил 5.0) и в опере (за исключением уродства, вызванного масштабированием).Глядя на код, я уверен, что он работает правильно.

РЕДАКТИРОВАТЬ: Установленный FF5 теперь и он масштабируется и переводит выглядит правильно