我有一个函数可以根据它的长度和角度画一条线(这不能改变,最终结果取决于它)
这是问题所在:
我有距离a(0°线)和距离b。使用毕达哥拉斯公式,我得到了虚线的长度。我也知道标记的角度。
最后一点必须在虚线的末端。
问题是该点逐渐升高然后降低。
如果您将半径设置得更多 - 只有更低
可能是什么问题以及如何解决?
let canv = document.getElementById('canv');
let ctx = canv.getContext('2d');
ctx.fillRect(0, 0, 300, 300);
let parts = 120;
let line_width = 300;
let part_width = line_width/(parts + 1);
let part_angle = (Math.PI/2)/parts;
let start_radius = 150;
// для ориентировки на холсте
ctx.strokeStyle = "white";
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.moveTo(0, 150);
ctx.lineTo(300, 150);
ctx.moveTo(0, 200);
ctx.lineTo(300, 200);
ctx.moveTo(0, 250);
ctx.lineTo(300, 250);
ctx.stroke();
ctx.strokeStyle = "red";
for(let i = 0; i <= parts; i++){
let b = 150 - i*part_width;
let hipotenusa = Math.sqrt(b*b + start_radius*start_radius);
ctx.beginPath();
ctx.moveTo(150, 250);
//поворачиваю точку с нужной длиной на нужный угол
ctx.lineTo(
150 + hipotenusa*Math.sin(i*part_angle + Math.PI*0.75),
250 + hipotenusa*Math.cos(i*part_angle + Math.PI*0.75));
ctx.stroke();
}
<canvas width="500" height="500" id="canv"></canvas>
如果您不将线连接到一个点,会发生以下情况(没有极坐标,它可能会有所帮助)