Javascript 在圆内画平行等距线
我试着在一个圆内画平行的等距线。我已经到了这样一个阶段,如果我从圆周上的相反角度连接点,我会得到平行线。。。但他们的距离并不相等 下面是一些代码:Javascript 在圆内画平行等距线,javascript,math,geometry,Javascript,Math,Geometry,我试着在一个圆内画平行的等距线。我已经到了这样一个阶段,如果我从圆周上的相反角度连接点,我会得到平行线。。。但他们的距离并不相等 下面是一些代码: 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.ar
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)
}
使用毕达哥拉斯定理
这个
y:直线相对于中心的垂直位置
x:其端点到中心的水平距离
r:圆的半径
。。。必须满足y^2+x^2=r^2
代码:
代码:
让它像这样工作。。。不知道如何在不使用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);
}
为了得到更好、更快的响应,你应该尝试编写一个很好的代码。谢谢@meowgoesthedog这几乎是对的。。。虽然在圆的顶部仍然留有间隙……但旋转仍然不起作用。这些线现在围绕中心点旋转,即不再旋转parallel@GeorgeGally哎呀,我犯了一些愚蠢的错误,希望它现在能被修复。
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);
}
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);
}