javascript - 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 :