如何在HTML5中使用2D數組繪制弧形元素？

Question

我正在嘗試使用來自2D數組的數字（或坐標）繪制弧形元素。

想象一下，弧像一個時鍾，應該只在我聲明的一天中顯示。

例如：想象“ 1”打開弧，而“ 0”關閉弧。 所以你得到這個數組：

1 | 16:00     
0 | 16:45

在這些示例中，我希望僅在一天的45分鍾內看到弧“繪制”圓。

有人可以給我看看如何做的任何例子嗎？

Answer 1

只需使用畫布對象， 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/