HTML5 холст неверные размеры повернутого текста

Question

Я пытаюсь визуализировать текст на холсте вертикально (повернут на 45 ° против часовой стрелки). Я знаю, что это возможно с html5 canvas, поэтому я написал следующее:

function drawText(canvas, text){
    var ctx = canvas.getContext('2d');

    ctx.translate(70, 140);
    ctx.rotate(Math.PI*1.5);

    ctx.fillStyle     = "blue";
    ctx.textBaseline  = "top";

    ctx.fillStyle = "blue";
    ctx.font = '700 55pt Verdana'
    ctx.fillText(text, 10, 20);
}

и холст, на котором это используется, имеет следующие стили (+ унаследованные стили)

canvas.trigger {
        position: relative;
        left: 0;
        width:65;
        height:98;
    }

a.trigger3{
position: absolute;
text-decoration: none;
left: 0;
width:60px;
height:98px;
font-size: 12px;
letter-spacing:0px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
font-weight: 700;
background:#333333;
border:2px solid #444444;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
z-index:1;
}

Код имеет такой результат:

в то время как в конечном результате должна быть кнопка (та, что с закругленными углами) и весь текст «Детали». С этим кодом есть две проблемы: во-первых, когда я даю нормальный размер для ctx.font (например, 12pt), текст слишком мал для чтения, и вторая: когда я использую больший размер шрифта, как в этом code (55pt) высота текста идеальна, но она слишком длинная (высота, когда вы ее поворачивали), поэтому отображается только часть текста («Подробности»).

Кто-то видит проблему с этим кодом? Я думаю, что это будет связано со стилем, потому что, когда я делаю то же самое без других стилей в редакторе Tryit w3schools, шрифт идеален.

Answer 1

Я думаю, что ваша проблема вызвана тем, что вы устанавливаете ширину и высоту холста с помощью таблицы стилей вместо свойств width / height элемента canvas. По некоторым причинам установка ширины / высоты холста через его таблицу стилей вызывает странные проблемы с масштабированием.

Если вы посмотрите на http://jsfiddle.net/bfzCS/2/,, вы поймете, что я имею в виду. Тот же код, который вы указали, я просто изменил, чтобы он устанавливал ширину / высоту с помощью таблицы стилей. Заметьте, как все это растягивается? Я думаю, что это как-то связано с тем, что ширина / высота таблицы стилей фактически контролирует поверхность рендеринга, а свойства элемента width / height управляют размером элемента.

Answer 2

Если ваша конкретная цель - вертикально выровненный текст, вам может помочь свойство CSS:

p.trigger {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }