Рисование параллельных равноудаленных линий внутри круга

Question

Я пытаюсь нарисовать параллельные равноотстоящие линии внутри круга.Я дошел до стадии, что, если я соединяю точки с их противоположных углов по окружности, я получаю параллельные линии ... но они не равноудалены ...

Вот некоторый код:

var num_lines = 8;
var num_points = num_lines * 2;
var start_angle = 100;
var points = [];
var radius = 200;
ctx.strokeCircle(w/2, h/2, radius, radius); // shorthand for ctx.arc( x, y, 5, 0, Math.PI * 2, true );

for (var i = 0; i < num_points; i++) {
   var angle = 360/num_points * i;
   ctx.fillStyle = "red";
   if (i %2 == 0 ) ctx.fillStyle = "blue";
   var x = w/2 + Math.cos(angle) * radius/2;
   var y = h/2 + Math.sin(angle) * radius/2;
   ctx.circle(x, y, 10, 10); // shorthand for ctx.arc( x, y, 5, 0, Math.PI * 2, true );
   points.push({x: x, y: y});
      }

for (var i = 0; i < num_lines; i++) {
    ctx.line(points[i].x, points[i].y, points[points.length-i-1].x, points[points.length-i-1].y)
 }

Answer 1

заставил это работать так ... интересно, как я могу повернуть линии на угол (математически, без использования ctx.translate и ctx.rotate):

var radius = 200;
var num_lines = 50;

  // vertical spacing
  var delta_y = (2.0 * radius) / (num_lines);

  ctx.strokeCircle(w/2, h/2, radius * 2, radius * 2);

  for (var i = 0; i < num_lines; i++)
  {
     // applying pythagoras
     var y = delta_y * (i) - radius;
     var x = Math.sqrt(radius * radius - y * y);

     // calculating endpoints
     var left_x  = w / 2 - x;
     var right_x = w / 2 + x;
     var end_y   = h / 2 + y;

     ctx.fillStyle = (i % 2 == 0) ? "blue" : "red";
     ctx.line(left_x, end_y, right_x, end_y);

  }

Answer 2

Использование Теорема Пифагора .

... ... 1005 *

• y: вертикальное положение линии относительно центра
• x: горизонтальное расстояние его конечных точек от центра
• r: радиус окружности

... должен удовлетворять y^2 + x^2 = r^2.

Код:

var radius = 200;
var num_lines = 8;

// vertical spacing
var delta_y = (2.0 * radius) / (num_lines + 1);

ctx.strokeCircle(w/2, h/2, radius, radius);
for (var i = 0; i < num_lines; i++)
{
   // applying pythagoras
   var y = delta_y * (i + 1) - radius / 2;
   var x = Math.sqrt(radius * radius - y * y);

   // calculating endpoints
   var left_x  = w / 2 - x;
   var right_x = w / 2 + x;
   var end_y   = h / 2 + y;

   ctx.fillStyle = (i % 2 == 0) ? "blue" : "red";
   ctx.circle(left_x, end_y, 10, 10);
   ctx.circle(right_x, end_y, 10, 10);
   ctx.line(left_x, end_y, right_x, end_y);
}

---

РЕДАКТИРОВАТЬ : вращение

Поворот вектора на угол a по часовой стрелке:

x' = x * cos(a) + y * sin(a)
y' = y * cos(a) - x * sin(a)

Код:

var radius = 200;
var num_lines = 50;
var angle = 60;

// temporary variables
var delta_y = (2.0 * radius) / (num_lines);
var cos_a = Math.cos(angle * Math.PI / 180.0);
var sin_a = Math.sin(angle * Math.PI / 180.0);

ctx.strokeCircle(w / 2, h / 2, radius * 2, radius * 2);

for (var i = 0; i < num_lines; i++)
{
   // applying pythagoras
   var y = delta_y * i - radius;
   var x = Math.sqrt(radius * radius - y * y);

   // rotating the displacement vector
   var left_x  = y * sin_a + x * cos_a;
   var right_x = y * sin_a - x * cos_a;
   var left_y  = y * cos_a - x * sin_a;
   var right_y = y * cos_a + x * sin_a;

   ctx.fillStyle = (i % 2 == 0) ? "blue" : "red";
   ctx.line(w / 2 + left_x , h / 2 + left_y ,
            w / 2 + right_x, h / 2 + right_y);
}