CODEWITHSUNDEEP
javascripthtml5-canvas
Unknown User
Unknown User

Reputation: 525

Divide arcs in sections

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>

Upvotes: 0

Views: 88

Answers (1)

le_m
le_m

Reputation: 20238

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">

Upvotes: 1

Related Questions