CODEWITHSUNDEEP
javascripthtmlcanvas
user3707650
user3707650

Reputation: 11

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

I'm trying to draw an arc element using numbers (or coordinates) coming from a 2D array.

Imagine that the arc is like a clock that supposed to show up only in times of the day I declare.

For example: imagine "1" turns the arc on, and "0" turns it off. So you get this array:

1 | 16:00     
0 | 16:45

in these example i would like to see the arc "paints" the circle only for 45 minutes of the day.

Can someone please show me any example of how to do that????

Upvotes: 0

Views: 147

Answers (1)

Jeff B
Jeff B

Reputation: 30099

Just use a canvas object and arc() will fill() to draw your arcs:

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

Do a little math on your times to convert them to radians:

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;

And of course some logic to determine which entries start/stop your arcs.

Demo (with some jQuery): http://jsfiddle.net/jtbowden/aqzbdhe3/

Upvotes: 1

Related Questions