Question

我尝试使用来自2D数组的数字（或坐标）绘制圆弧元素。

想象一下，电弧就像一个钟表，只能在我宣布的那一天出现。

例如：想象＆＃34; 1＆＃34;打开电弧，＆＃34; 0＆＃34;把它关掉所以你得到这个数组：

1 | 16:00     
0 | 16:45

在这些例子中，我希望看到电弧＆＃34;油漆＆＃34;圆圈只有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/

如何在HTML5中使用2D数组绘制弧元素？

1 个答案: