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

How to draw an arc element using a 2D array in HTML5?

本文关键字：绘制 数组 元素 2D HTML5      更新时间：2023-09-26

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

想象弧线就像一个时钟，只在我指定的时间出现。

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

1 | 16:00     
0 | 16:45

在这个例子中，我希望看到弧线在一天中只"画"圆圈45分钟。

有人能告诉我如何做到这一点????任何例子

只需使用画布对象和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/

相关文章：