如何在画布中旋转圆弧扇区（如圆心）？

Question

如何在其枢轴（圆心）上旋转圆扇形（或扇形）？

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.rotate(60 * Math.PI / 180); // wrong rotation
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, (1/12) * 2 * Math.PI);
    ctx.lineTo(100, 75);
    ctx.closePath();
    ctx.fill();
</script> 

Answer 1

希望这可以帮助。

旋转绘制的对象可以用arc本身作为它的第四个参数。这个link也可以帮助你。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var startAngle = 0;
var rotatedAngle = 60;

function degtorat (deg){
  return deg * Math.PI/180;
}

// degtorat2 looks odd in the first glance but it is not because PI
// is also used as counter variable with deg no matter whether is's 
// put after the division
// -> (deg * PI) / 180 as in degtorat   
function degtorat2 (deg){
  return deg / 180 * Math.PI;
}

setInterval(function(){

  ctx.beginPath();
  // ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
  // endangle must also be increased by the same amount of startAngle
  ctx.arc(100, 75, 50, degtorat(startAngle), degtorat(startAngle)+(1/12) * 2 * Math.PI);
  ctx.lineTo(100,75);
  ctx.closePath();
  ctx.fill();

  // increase angle at 60 degrees  
  startAngle += rotatedAngle;

},1000);

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

---

根据要求，这些操作degtorat(startAngle)+(1/12) * 2 * Math.PI的简短解释，一步一步：

整个等式以弧度为单位返回endAngle，绘制三角形。

让我们把它分开：

1. degtorat(startAngle)： 我们想要在顺时针方向从某个startAngle开始绘制一个三角形，因此我们也必须从这个角度开始。但这还不够，因为三角形也应该有一定的尺寸。所以这里(1/12) * 2 * Math.PI发挥作用。 剧透：degtorat将（主要由人类使用）度转换为弧度（总是由HTML5画布上下文操作使用）。 （我刚刚添加了degtorat degtorat2来证明无论PI在分割之前或之后是否相乘，都会返回右弧度。）
2. (1/12) * 2 * Math.PI： 必须将这些操作添加到degtorat(startAngle)，因为三角形应具有一定的大小。要计算这个大小，我们使用这些操作(1/12) * 2 * Math.PI。 2 * Math.PI用弧度表示整个圆圈。一个圆可以包含12个三角形，每个三角形的大小为30度，但我们只能绘制6个三角形，因为我们将30度空白。这就是为什么我们必须将整个圆除以12（(1/12)，6个可见三角形，6个空白三角形）。 但我们也希望将可见三角形旋转60度。因此，在绘制了第一个可见三角形填满整个圆圈的30度后，我们将startAngle增加60度，以便在第一个startAngle之后开始绘制下一个三角形60度并留下30度空白。