HTML5 文本旋转

Question

我想旋转图形 x 轴的文本。下面是我正在使用的代码

context.rotate(20*Math.PI/2);
context.fillText(name, startX + (i * barWidth) + i, chartHeight + 10, 200); 
context.rotate(-20*Math.PI/2);

写完文字后，我将它旋转回原来的位置。但不知何故，它不起作用。工作代码可以在http://intercepter.comli.com/example3.html找到

我已经通过this article 并尝试过，但它只是不工作。请帮帮我

Answer 1

旋转20*Math.PI/2 类似于不旋转任何东西，因为：

20*Math.PI/2 = 10*Math.PI = 2*Math.PI

不知道你想如何旋转你的文字，而不是

context.rotate(20*Math.PI/2);
context.fillText(name, startX + (i * barWidth) + i, chartHeight + 10, 200); 
context.rotate(-20*Math.PI/2);

您可以尝试像这样使用transformations：

context.save();
context.setTransform(1,0,0,1,0,0);
context.translate(startX + (i * barWidth) + barWidth/2, chartHeight - 10); 
context.rotate(-Math.PI/2);

context.fillText(name, 0, 0, 200);        
context.restore();

查看工作中的DEMO：