Javascript 如何在画布html5中旋转此文本？

我已经写了这段代码。我以前用纯js、css、html5编程过，但在iDevices上它看起来很奇怪，所以我想我也可以在画布上轻松实现。但我遇到了以下问题

您可以看到我检查文本角度的条件。我尝试了多种方法，但仍然无法在“图表”的另一侧将文本颠倒过来。有人能帮我吗

$（文档）.ready（函数（）{
var orange=“#ef5e09”；
var c=$（“我的图表”）；
var ctx=c.get（0.getContext（“2d”）；
var dData=函数（）{
返回Math.round（Math.random（）*90）+10
};
风险值数据={
标签：[“第1项”、“第2项”、“第3项”、“第4项”、“第5项”、“第6项”、“第7项”、“第8项”、“第9项”、“第10项”]，
数据：[dData（），dData（），dData（），dData（），dData（），dData（），dData（），dData（），dData（），dData（），dData（）]
}
函数绘图（）{
//检查画布父宽度并计算尺寸
c、 css（“宽度”，c.parent（）.width（））；
c、 css（“高度”，c.parent（）.width（））；
ctx.canvas.width=c.parent（）.width（）；
ctx.canvas.height=ctx.canvas.width；
变量d={
cX:ctx.canvas.width/2，
cY:ctx.canvas.width/2，
宽度：ctx.canvas.width，
高度：ctx.canvas.height，
线宽：ctx.canvas.width*0.00934579，
半径：ctx.canvas.width*0.03，
cW:ctx.canvas.width*0.002，
fW:ctx.canvas.width*0.28
};
//画背景圆圈
对于（变量i=10；i>0；i--）{
ctx.beginPath（）；
ctx.弧（d.cX，d.cY，i*d.radius，0，2*Math.PI，false）；
如果（i%2）{
ctx.fillStyle='#f6f7f8'；
ctx.fill（）；
}否则{
ctx.fillStyle='#fff'；
ctx.fill（）；
}
ctx.lineWidth=d.cW；
ctx.strokeStyle='#babbc'；
ctx.stroke（）；
}
var sa=2*Math.PI/data.data.length；
var font=d.width*（18/1000）+“px Verdana”；
对于（var i=0；iMath.PI/2&&i*sa<1.5*Math.PI）{
//这是我试图旋转文本的编辑部分
ctx.translate（-ctx.measureText（l）.宽度，d.宽度*（18/1000）/2）；
旋转（数学PI）；
//编辑部分结束
翻译（d.cX，d.cY）；
ctx.旋转（（10-i）*sa）；
ctx.font=font；
ctx.fillStyle=橙色；
ctx.填充文本（长，10.5*d.半径，5）；
}否则{
翻译（d.cX，d.cY）；
ctx.旋转（（10-i）*sa）；
ctx.font=font；
ctx.fillStyle=橙色；
ctx.填充文本（长，10.5*d.半径，5）；
}
ctx.restore（）；
}
}
draw（）；
$（窗口）。调整大小（绘制）；
});
测量文本时，需要在测量文本之前设置字体

当围绕非原点的点（例如文本的中间）旋转时，需要平移、旋转、平移

在代码中，尝试替换

  if (i * sa > Math.PI / 2 && i * sa < 1.5 * Math.PI) {
  //here's the edited part where I tried to rotate the text in place
  ctx.translate(-ctx.measureText(l).width,d.width*(18/1000)/2);
  ctx.rotate(Math.PI);
  //end of edited part
    ctx.translate(d.cX, d.cY);
    ctx.rotate((10 - i) * sa);
    ctx.font = font;
    ctx.fillStyle = orange;
    ctx.fillText(l, 10.5 * d.radius, 5);
  } else {

if（i*sa>Math.PI/2&&i*sa<1.5*Math.PI）{
//这是我试图旋转文本的编辑部分
ctx.translate（-ctx.measureText（l）.宽度，d.宽度*（18/1000）/2）；
旋转（数学PI）；
//编辑部分结束
翻译（d.cX，d.cY）；
ctx.旋转（（10-i）*sa）；
ctx.font=font；
ctx.fillStyle=橙色；
ctx.填充文本（长，10.5*d.半径，5）；
}否则{

与

  if (i * sa > Math.PI / 2 && i * sa < 1.5 * Math.PI) {
    ctx.translate(d.cX, d.cY);
    ctx.rotate((10 - i) * sa);
    ctx.font = font;
    ctx.translate(10.5 * d.radius + ctx.measureText(l).width / 2, 0);
    ctx.rotate(Math.PI);
    ctx.translate(-10.5 * d.radius - ctx.measureText(l).width / 2, 0);
    ctx.fillStyle = orange;
    ctx.fillText(l, 10.5 * d.radius, 5);
  } else {

if（i*sa>Math.PI/2&&i*sa<1.5*Math.PI）{
翻译（d.cX，d.cY）；
ctx.旋转（（10-i）*sa）；
ctx.font=font；
平移（10.5*d.radius+ctx.measureText（l.width）/2，0）；
旋转（数学PI）；
平移-10.5*d.radius-ctx.measureText（l.width/2,0）；
ctx.fillStyle=橙色；
ctx.填充文本（长，10.5*d.半径，5）；
}否则{
以下是如何使用变换围绕中心点旋转文本，同时保持文本以任何角度直立


可以使用
context.translate
+
context.rotate
以角度将文本从中心点向外推

您可以使用
context.scale
根据角度的需要垂直或水平翻转文本

您可以使用
context.textbreeline
使文本显示在距离中心点均匀的位置，而不管其角度如何


下面是示例代码和演示：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var角=0；
var angleIncrement=Math.PI/180；
var计数=0；
var-cx=75；
var-cy=75；
var半径=3；
var PI2=数学PI*2；
ctx.beginPath（）；
ctx.arc（cx，cy，3,0，PI2）；
ctx.fill（）；
请求动画帧（动画）；
函数动画（时间）{
var PI2=数学PI*2；
ctx.clearRect（0,0，cw，ch）；
ctx.beginPath（）；
ctx.arc（cx，cy，3,0，PI2）；
ctx.fill（）；
DrawLabelateAngle（‘标签#’+计数、cx、cy、角度、半径）；
角度+=角度增量；
角度=（角度+PI2）%PI2；
计数++；
请求动画帧（动画）；
}
函数DrawLabelateAngle（文本、x、y、角度、偏移）{
//计算0和PI*2之间的夹角
var normA=（角度+数学PI*2）%（数学PI*2）；
//准备好翻转文本（如果文本在左侧）
如果（normA>=Math.PI*3/2 | | | normA
ctx.rotate
应该能够将文本颠倒过来。不是吗？确实在这个片段中已经做了很多次了，但是请看一下c