如何在畫布中旋轉圓弧扇區（如圓心）？

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本身作為它的第四個參數。 此鏈接也可能對您有所幫助。

 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發揮作用。

   Spoiler： 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度空白。