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

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>

编辑:我还想问您如何标记构成 Angular 这些切片。例如切片 1 得到“1”等等 1 2 3 4 5。它应该由顶点( Angular )定位

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>

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

那么这是如何工作的呢？基本上在画完线之后，将轴移动到您希望每个数字所在的位置 (translate)，然后反向旋转轴，旋转量与您最初旋转线的量相同 (旋转)。这会将数字旋转到其原始坐标系。