Javascript 在画布中旋转多个文本

我试图在HTML5画布中创建图形。但是x轴上的文本是重叠的。我试着旋转它，使它看起来整洁

示例JSFIDLE：

我试着像下面这样保存、旋转和恢复

c.save();
c.rotate(-Math.PI/2);
c.fillText(data.values[i].X, getXPixel(i), graph.height() - yPadding + 20);
c.restore();

但是文本显示在不同的位置。

您可以调整文本的角度，使其始终符合以下图形：

保存起始上下文状态（未转换）

设置所需的字体

测量文本的像素宽度

转换到所需的端点

旋转到所需的角度

设置文字基线，使文字垂直居中于端点

按负宽度偏移绘制文本，以便文本在所需端点处结束

将上下文重新存储到其开始状态

以下是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
对于（var i=0；i

您可以调整文本的角度，使其始终符合以下图形：

保存起始上下文状态（未转换）
设置所需的字体
测量文本的像素宽度
转换到所需的端点
旋转到所需的角度
设置文字基线，使文字垂直居中于端点
按负宽度偏移绘制文本，以便文本在所需端点处结束
将上下文重新存储到其开始状态
以下是示例代码和演示：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
对于（var i=0；i可能重复：我已经回答了这个问题并使用了rotate和restore…但是它没有按预期工作。如果您没有设法旋转文本，这种方法可能会很有用：
if（i%2==0）{c.fillText（data.values[i].X，getxpix（i），graph.height（）-yPadding+20）}else{c.fillText（data.values[i].X，getxpix（i），graph.height（）-yPadding+10）；}
嘿，这很好，…但是仍然旋转会让它看起来很漂亮..可能重复：我已经回答了这个问题，并使用了旋转和还原…但是它没有按预期工作如果您无法旋转文本，这种方法可能会很有用：
如果（I%2==0）{c.fillText（data.values[i].X，getXPixel（i），graph.height（）-yPadding+20）；}其他{c.fillText（data.values[i].X，getXPixel（i），graph.height（）-yPadding+10）；}
嘿，这很不错，但仍然旋转会让它看起来很漂亮。。