Javascript Canvas 弧线不是根据 Angular 绘制的

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

我对代码做了一些调整。首先，我们需要知道一年中每一天的 Angular 。我想说的是，这将是一个完整的圆 (Math.PI * 2) 除以 365(如果是其中一年，则为 366)。那么就是正确理解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>