html5 canvas неправильные размеры повернутого текста

Question

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

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); 
} 

и холст, что используется на имеет эти стили (+ inherrited стили)

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; 
} 

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

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

У кого-нибудь есть проблемы с этим кодом? Я думаю, что это было бы связано с стилем, потому что, когда я делаю то же самое без других стилей в Tryit Editor 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); 
    }