Javascript畫布弧未按角度繪制

Question

嗨，我在繪制圖形時遇到問題。 情況是還剩下幾天，我需要畫線

var eAngle          = tax * 0.0172;

var c               = document.getElementById("tax");
var ctx             = c.getContext("2d");

ctx.beginPath();

ctx.arc(100,100,70,1.5 , Math.PI * eAngle, true);

ctx.stroke();

另外，我怎么能在圓弧的中間寫一些文字呢？

Answer 1

我對代碼做了一些調整。 首先，我們需要知道您一年中每一天的角度。 我會說，這將是一個完整的圓（ Math.PI * 2 365（或366時，其單OF- 那些 -years）分）。 然后是正確理解arc函數的問題：

arc(x, y, radius, angle (0 = x-axis to the right), end angle (starting x-axis where 1 radian is a full circle), counterclockwise (true is counterclockwise drawing from start until the end angle, and false or ommitting is the regular clockwise angle);

最后，這將起作用：

context.arc(100, 100, 50, -Math.PI / 2, -Math.PI / 2 + day * (Math.PI * 2 / 365), false);

其中，參數依次為：x位置，y位置，半徑，-90度（從y軸而不是x處開始），無論輸入一天時輸出的結果加上前一個的偏移量論點。

要在此之上繪制文本，您可以簡單地使用canvas fillText函數。

 var dayArc = Math.PI * 2 / 365; var dayN = 0; var offset = -Math.PI / 2; var canvas = document.getElementById("tax") var context = canvas.getContext('2d'); setInterval(function(){ dayN = dayN > 364 ? 0 : dayN+1; canvas.width = 500; context.beginPath(); context.arc(100, 100, 50, offset, offset + dayN * dayArc, false); context.stroke(); context.textAlign = 'center'; context.font = "24px 'Helvetica Neue', sans-serif"; context.fillText((365-dayN) + '/365', 100, 110); }, 1000 / 60); 

 <canvas id="tax" widht="500" height="500"></canvas> 

Answer 2

好的。 因此，我將計算分開，以使情況更清楚。 我們知道一個完整的圓是Math.PI * 2弧度。 因此，我們將其分開。

由於我們只需要一個圓的一部分，代表一年中的天數，因此我們保留一個單獨的變量，例如fractionOfCircle ，然后將它們相乘以獲得最終結果。

var fractionOfCircle = days / 365;

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

ctx.beginPath();

ctx.arc(100, 100, 70, 1.5, Math.PI * 2 * fractionOfCircle, true);

ctx.stroke();

要將文本放在圓圈內，我的第一種方法是覆蓋HTML元素（如div ，並相應地放置文本。