html5 canvas旋轉文本的尺寸錯誤

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

該代碼具有以下結果：

而最終結果應該是一個按鈕（帶有四舍五入的導數的按鈕）和整個文本“ Details”。 此代碼有兩個問題：首先，當我給ctx.font提供正常大小（例如12pt）時，文本太小而無法閱讀；第二，當我使用這樣的較大字體時代碼（55pt）文本的高度是完美的，但是它太長了（旋轉時會產生高音），因此僅顯示文本的一部分（“詳細信息”）。

有人看到此代碼有問題嗎？ 我認為這與樣式有關，因為當我在w3schools的Tryit編輯器中不使用其他樣式進行同樣操作時，字體是完美的。

Answer 1

我認為您的問題是由於您通過樣式表而不是canvas元素的width / height屬性設置畫布的寬度和高度引起的。 由於某些原因，通過樣式表設置畫布的寬度/高度會導致奇怪的縮放問題。

如果您看一下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);
    }