Javascript 如何在画布中旋转图表，同时保持数字竖直？

我正在旋转画布上的图表，使其围绕中心旋转，同时保持字母竖直。我试图使用ctx.rotate（#），但它使用画布左侧的中心来旋转整个图表

下面的链接提供了一个视觉效果：我希望它看起来像绿色，而不是红色，就像它目前在我的代码中所做的那样

以下是JSFIDLE：

我的代码如下：

$（文档）.ready（函数（）{
init（）；
函数init（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
抽签（ctx）；
}
功能图（ctx）{
//第1层/线路
ctx.旋转（00）；
ctx.beginPath（）；
ctx.moveTo（75.1,7.7）；
ctx.lineTo（162.9,7.7）；
ctx.stroke（）；
函数字选择器1（）{
变量词=['A'，'B'，'C']；
var random=word[Math.floor（Math.random（）*word.length）]；
返回随机；
}
var x=WordSelector1（）；
//第1层/P
ctx.font=“12.0px‘Myriad Pro’”；
ctx.旋转（0）；
ctx.fillText（x，60.0，10.0）；
}
});

---

任何帮助都将不胜感激。谢谢

一旦您知道如何将原点（0,0）移动到另一个点，然后围绕该点旋转轴，那么在画布中绘制旋转图形就有点容易了

我在代码中添加了一些注释，以避免重复代码和解释

我还将函数移出了

$（document）.ready

，并更改了一些数字以获得更精确的值

$（文档）.ready（函数（）{
init（）；
});
函数init（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
抽签（ctx）；
}
功能图（ctx）{
ctx.font=“12.0px‘Myriad Pro’”；
var angle=Math.random（）*150；//运行更多次以查看其他角度
//这会将0,0平移到水平线的中心
ctx.translate（100100）；
//这将绘制原始直线
ctx.beginPath（）；
ctx.moveTo（-50，0）；//坐标相对于新原点
ctx.lineTo（50,0）；
ctx.stroke（）；
//画第一个字母
var x=WordSelector1（）；
ctx.fillText（x，-60,0）；
//此部分使用文本直线绘制旋转线
//按“角度”旋转画布轴
ctx.旋转（角度*数学PI/180）；
ctx.beginPath（）；
ctx.moveTo（-50，0）；//相对坐标不变
ctx.lineTo（50，0）；//这表明轴是旋转的，而不是图形
ctx.stroke（）；
var x=WordSelector1（）；
ctx.translate（-60,0）；//原点现在必须移动到要放置字母的位置
ctx.rotate（-angle*Math.PI/180）；//按“-angle”反向旋转
fillText（x，0，0）；//画字母
}
函数字选择器1（）{
变量词=['A'，'B'，'C']；
var random=word[Math.floor（Math.random（）*word.length）]；
返回随机；
}

画布{
边框：1px实心；
}

---

一旦您知道如何将原点（0,0）移动到另一个点，然后围绕该点旋转轴，在画布中绘制旋转图形就有点容易了

我在代码中添加了一些注释，以避免重复代码和解释

我还将函数移出了

$（document）.ready

，并更改了一些数字以获得更精确的值

$（文档）.ready（函数（）{
init（）；
});
函数init（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
抽签（ctx）；
}
功能图（ctx）{
ctx.font=“12.0px‘Myriad Pro’”；
var angle=Math.random（）*150；//运行更多次以查看其他角度
//这会将0,0平移到水平线的中心
ctx.translate（100100）；
//这将绘制原始直线
ctx.beginPath（）；
ctx.moveTo（-50，0）；//坐标相对于新原点
ctx.lineTo（50,0）；
ctx.stroke（）；
//画第一个字母
var x=WordSelector1（）；
ctx.fillText（x，-60,0）；
//此部分使用文本直线绘制旋转线
//按“角度”旋转画布轴
ctx.旋转（角度*数学PI/180）；
ctx.beginPath（）；
ctx.moveTo（-50，0）；//相对坐标不变
ctx.lineTo（50，0）；//这表明轴是旋转的，而不是图形
ctx.stroke（）；
var x=WordSelector1（）；
ctx.translate（-60,0）；//原点现在必须移动到要放置字母的位置
ctx.rotate（-angle*Math.PI/180）；//按“-angle”反向旋转
fillText（x，0，0）；//画字母
}
函数字选择器1（）{
变量词=['A'，'B'，'C']；
var random=word[Math.floor（Math.random（）*word.length）]；
返回随机；
}

画布{
边框：1px实心；
}

这太有帮助了！工作得很漂亮。我也很感谢你花时间在代码中添加注释，因为我正在努力学习这一点，而不仅仅是让它发挥作用。谢谢那太有用了！工作得很漂亮。我也很感谢你花时间在代码中添加注释，因为我正在努力学习这一点，而不仅仅是让它发挥作用。谢谢

    <script>
$(document).ready(function () {
  init();

function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  draw(ctx);
}

function draw(ctx) {
  // layer1/Line
  ctx.rotate(00);
  ctx.beginPath();
  ctx.moveTo(75.1, 7.7);
  ctx.lineTo(162.9, 7.7);
  ctx.stroke();
  function WordSelector1() {
  var word = ['A', 'B', 'C'];
  var random = word[Math.floor(Math.random() * word.length)];
  return random;
}
  var x = WordSelector1();
  // layer1/P
  ctx.font = "12.0px 'Myriad Pro'";
    ctx.rotate(0);
  ctx.fillText(x, 60.0, 10.0);
}
 });
</script>