Javascript 它看起来像我'；当我用弧度把半圆分成四部分时，我没有得到一条直线

需要解决的问题：

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

• 所有线条（REC）的长度是否相同。不确定，但看起来向外的弧度为0.7853981633974483的弧度更小

window.onload=function（）{
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
上下文翻译（200200）；
对于（变量i=0；i<5；i++）{
context.save（）
旋转（Math.PI/4*i）；
context.fillStyle=“红色”；
context.fillRect（0,0,70,3）
context.restore（）
}
}

---

首先，长度都是一样的。如果图像看起来不一样，很可能是由于原点的轻微重叠造成的错觉

现在，事物没有排列的原因是由于旋转和矩形的性质。旋转矩形时，旋转原点位于矩形的左上角。因此，当旋转180度时，矩形的原点将位于右下角。如果你加宽你的矩形，改变它们的颜色，这会更明显。例如：

var cols=[“红色”、“绿色”、“蓝色”、“黄色”、“紫色”]；
window.onload=函数（）{
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
上下文翻译（200200）；
对于（变量i=0；i<5；i++）{
context.save（）；
旋转（Math.PI/4*i）；
context.fillStyle=cols[i]；
context.fillRect（0,0,70,30）；
restore（）；
}
}

---

谢谢您的回答。如果你把角度之间的数字做成这样，人们就会知道哪个部分是哪个，我会非常感激。现在它已经上线了。有4个切片，所以它应该是1,2,3,4，而不是0,1,2,3,4。这些数字应该放在切片的中间。我会接受这个答案，因为我会非常满意。问题是我刚刚习惯了定位，不知道如何在这个for循环中进行定位。我几乎能做到，但是数字在旋转。数字应该与页面垂直。。。。补充Matt的好答案：在

上下文之后。恢复
（1）旋转到当前切片的中间
。旋转（（Math.PI/4）*i-Math.PI/8）
，（2）从中心水平向外平移约45像素
平移（45,0）
，（3）现在是棘手的部分，通过旋转的量来解旋转，使数字再次垂直旋转（（（Math.PI/4）*i-Math.PI/8））
，（4）如果（i>0）{context.fillText（i，0,0）；}

，则绘制数字。我添加了一个更新的示例，这应该足够了。感谢你们两位：）