Javascript html5画布旋转文本的错误尺寸

我试图在画布上垂直显示文本（逆时针旋转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);
}

在其上使用的画布具有以下样式（+固有样式）

该代码具有以下结果：

而最终的结果应该是一个按钮（那个带有圆角的按钮）和整个文本“细节”。 这段代码有两个问题：首先，当我为ctx.font（例如12pt）指定一个正常大小时，文本太小，无法阅读；第二个问题：当我使用更大的字体大小（如此代码中的55pt）时，文本的高度是完美的，但它太长（旋转时高度太高），因此只显示部分文本（“细节”）

---

有人看到这个代码有问题吗？我认为它与样式相关，因为当我在W3T的Tryit编辑器中没有其他样式时，字体是完美的。

如果您的特定目标是垂直对齐的文本，则有一个CSS属性可能会有所帮助：

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

---

我认为您的问题是由于您通过样式表而不是canvas元素的width/height属性来设置画布的宽度和高度。由于某些原因，通过样式表设置画布的宽度/高度会导致奇怪的缩放问题

---

如果你看看，你就会明白我的意思。与您提供的代码相同，我只是对其进行了更改，以便通过样式表设置宽度/高度。注意到它是如何伸展的吗？我认为这与样式表的宽度/高度实际上控制渲染表面有关，而宽度/高度元素属性控制元素的大小。

顺便说一句，对于游戏，我建议使用，并且您永远不要使用W3作为参考。您可以看到一长串的原因。感谢您的提示，我在JSFIDLE中尝试了代码，它在那里也起了作用：正如您在示例中看到的，文本的比例没有弄乱，但在我生成的程序（见上图）中，文本被拉长了是的。您的HTML将需要包括以下内容。或者您可以在运行时设置元素的宽度和高度属性（不是同名的CSS属性，而是实际的元素属性）。

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