当我使用弧度将半圆分成四个部分时，看起来我没有得到一条直线

Question

需要解决的问题：

• 看起来左边的直线比右边的高。我不想那样。为什么会发生这种情况，我该如何解决？

• 所有的线（记录）都一样长吗。不确定，但看起来向外辐射0.7853981633974483弧度的较小

window.onload = function(){
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  context.translate(200,200);
  for(var i = 0; i < 5; i++){
    context.save()
    context.rotate(Math.PI / 4 * i);
    context.fillStyle = "red";
    context.fillRect(0,0,70,3 )
    context.restore()
  }
}

<canvas id="canvas" width="400" height="400"></canvas>

编辑：我也想问你，你会如何标记这些组成角度的切片。例如，切片1得到"1"，依此类推1 2 3 4 5。它应该由顶点（角度）定位

Answer 1

首先，长度都是相同的。如果出现不同，很可能是由于原点处的轻微重叠产生的幻觉。

现在，事情没有排列的原因是由于旋转和矩形的性质。旋转rect时，旋转原点位于矩形的左上角。因此，当旋转180度时，矩形的原点将位于右下角。如果你加宽矩形并改变它们的颜色，这一点可以看得更清楚。例如：

var cols = ['red', 'green', 'blue', 'yellow', 'purple'];
window.onload = function(){
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.translate(200,200);
    for(var i = 0; i < 5; i++){
        context.save();
        context.rotate(Math.PI / 4 * i);
        context.fillStyle = cols[i];
        context.fillRect(0,0,70,30);
        context.restore();
    }
}

<canvas id="canvas" width="400" height="400"></canvas>

---

母猪，你是怎么解决的？一种固定方法是在y轴上平移每个矩形，即旋转后其宽度的一半。例如：

var cols = ['red', 'green', 'blue', 'black', 'purple'];
// the line width (technically rect height)
var width = 3; 
var length = 70;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.translate(200,200);
for(var i = 0; i < 5; i++){
    var rotAmount = Math.PI / 4 * i;    
    context.save();
    context.rotate(rotAmount);
    context.translate(0, -(width / 2));
    context.fillStyle = cols[i];
    context.fillRect(0,0,length,width);
    context.translate(length + 20, 0);
    context.rotate(-rotAmount);
    context.font="18px Verdana";
    context.fillText(i+1,-5,5);
    context.restore();
}

<canvas id="canvas" width="400" height="400"></canvas>

还根据@markE的评论添加了fillText，让您开始绘制数字

那么这是怎么回事呢？基本上，绘制直线后，将轴移动到每个数字所在的位置（translate），然后反向旋转轴，与最初旋转直线的量相同（rotate）。这将使数字旋转到其原始坐标系。