javascript - 如何在 HTML5 中使用二维数组绘制圆弧元素？

Question

我正在尝试使用来自 2D 数组的数字(或坐标)绘制圆弧元素。

想象一下，弧线就像一个时钟，应该只在我声明的一天中的某个时间出现。

例如:假设“1”打开电弧，“0”关闭电弧。所以你得到这个数组:

1 | 16:00     
0 | 16:45

在这些示例中，我希望看到弧线仅在一天中的 45 分钟内“绘制”圆圈。

有人可以向我展示如何执行此操作的任何示例吗？？？

Answer 1

只需使用 Canvas 对象，arc()将fill()来绘制弧线:

ctx.fillStyle = "#22dd22";
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 50, startRads, endRads);
ctx.moveTo(100, 100);
ctx.fill();

对您的时间进行一些数学运算，将其转换为弧度:

var time = timetext.split(/\:/);
var secs = 0;
while(time[x] != null) {
    secs += parseInt(time[x])*(3600/Math.pow(60,x));
    x++;
}
var radians = ((secs/21600) - 0.5) * Math.PI;

当然还有一些逻辑来确定哪些条目开始/停止你的弧。

演示(带有一些 jQuery):http://jsfiddle.net/jtbowden/aqzbdhe3/