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