Divide arcs in sections

Question

I'm trying to build a calendar and want to divide this arc in 12 sections which I can later manipulate individually (like a pie chart) but I don't understand how I can achieve this.

Also the drawing should start at 12 o'clock.

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var y = 350; var x = 300; var radius = 200; var lineWidth = 1; //Draw January for (var i = 0; i <= 31; i++) { ctx.beginPath(); ctx.arc(x, y, radius, -Math.PI/2, Math.PI/12, false); ctx.stroke(); } //Draw February for (var i = 0; i <= 31; i++) { ctx.beginPath(); ctx.arc(x, y, radius, -Math.PI/2, Math.PI/12, false); ctx.stroke(); }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body style="background-color: #fff;"> <canvas id="canvas" width="800" height="600" style="border: 1px solid black;"> </canvas> <script src="script.js"></script> </body> </html>

Answer 1

You need to specify the correct starting and ending angle in radians. A full circle starting from 12 o'clock starts at an angle of start = -Math.PI / 2 and ends at start + 2 * Math.PI . To specify 1/12th of a full circle, you need to divide by 12:

 // Draw the i/12th arc segment starting at 12 o'clock: function drawOneTwelfthArc(ctx, x, y, radius, i) { var start = Math.PI / 6 * i - Math.PI / 2; var end = start + Math.PI / 6; ctx.beginPath(); ctx.arc(x, y, radius, start, end); ctx.stroke(); } // Example: var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); drawOneTwelfthArc(ctx, 50, 50, 30, 0); drawOneTwelfthArc(ctx, 50, 50, 40, 1); drawOneTwelfthArc(ctx, 50, 50, 50, 2); drawOneTwelfthArc(ctx, 50, 50, 60, 3); drawOneTwelfthArc(ctx, 50, 50, 70, 4); drawOneTwelfthArc(ctx, 50, 50, 80, 5);

 <canvas id="canvas">

Divide arcs in sections

Question

1 answers

solution1
1 2017-04-30 10:20:17

Divide arcs in sections

Question

1 answers

solution1 1 2017-04-30 10:20:17

solution1
1 2017-04-30 10:20:17