javascript - 如何在 Canvas 中旋转一个圆扇形穿过其枢轴(作为圆心)？

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，一步一步:

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

让我们把它分开:

1. degtorat(startAngle):

   我们想从某个startAngle开始顺时针绘制一个三 Angular 形，因此我们也必须从这个 Angular 开始。但这还不够，因为三 Angular 形也应该有一定的大小。所以这里 (1/12) * 2 * Math.PI 开始发挥作用。

   剧透:degtorat 将度数(主要由人类使用)转换为弧度(HTML5 canvas-context 操作总是使用)。 (我刚刚添加了 degtorat degtorat2 来证明无论 PI 在除法之前还是之后相乘总是返回正确的弧度。)

2. (1/12) * 2 * Math.PI:

   这些操作必须添加到 degtorat(startAngle) 中，因为三 Angular 形应该有一定的大小。为了计算这个大小，我们使用这些操作 (1/12) * 2 * Math.PI。

   2 * Math.PI 以弧度表示一个完整的圆。一个圆可以包含 12 个三 Angular 形，每个三 Angular 形的大小为 30 度，但我们只能绘制 6 个三 Angular 形，因为我们将 30 度留空。所以这就是为什么我们必须将整个圆除以 12((1/12)，6 个可见三 Angular 形，6 个空白三 Angular 形)。

   但是我们还想将一个可见的三 Angular 形也旋转 60 度。因此，在绘制第一个填满整个圆 30 度的可见三 Angular 形后，我们将 startAngle 增加 60 度，以便在第一个 startAngle 之后的 60 度处开始绘制下一个三 Angular 形> 并留出 30 度的空白。