Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/440.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 两点之间的圆弧:设置角度“;0“;最上面_Javascript_Canvas_Geometry_Trigonometry - Fatal编程技术网

Javascript 两点之间的圆弧:设置角度“;0“;最上面

Javascript 两点之间的圆弧:设置角度“;0“;最上面,javascript,canvas,geometry,trigonometry,Javascript,Canvas,Geometry,Trigonometry,我用Javascript编写了一个函数来绘制一条弧。它基于Bresenham圆算法,在绘制点时,我检查它们是否在初始角度和最终角度之间 它工作正常,但角度“0”在圆圈的“最左边”,而我希望它在顶部,同时仍然顺时针计算角度。如何做到这一点?谢谢 const canvas=document.getElementById('canvas'); const ctx=canvas.getContext('2d'); 函数pset(x,y){ ctx.fillRect(x,y,1,1); } 功能弧(x,

我用Javascript编写了一个函数来绘制一条弧。它基于Bresenham圆算法,在绘制点时,我检查它们是否在初始角度和最终角度之间

它工作正常,但角度“0”在圆圈的“最左边”,而我希望它在顶部,同时仍然顺时针计算角度。如何做到这一点?谢谢

const canvas=document.getElementById('canvas');
const ctx=canvas.getContext('2d');
函数pset(x,y){
ctx.fillRect(x,y,1,1);
}
功能弧(x,y,rd,a1=0,a2=360){
设xx=rd;
设yy=0;
设radiusError=1-xx;
角度中的函数(x1,y1){
常数deltaY=y1-y;
常数deltaX=x1-x;
const angleInDegrees=(数学atan2(deltaY,deltaX)*180/数学PI)+180;
返回角度基准>=a1和角度基准=yy){
if(在角(xx+x,yy+y))pset(xx+x,yy+y);
if(在角(yy+x,xx+y))pset(yy+x,xx+y);
如果(在角(-xx+x,yy+y))pset(-xx+x,yy+y);
如果(在角(-yy+x,xx+y))pset(-yy+x,xx+y);
如果(在角(-xx+x,-yy+y))pset(-xx+x,-yy+y);
如果(在角(-yy+x,-xx+y))pset(-yy+x,-xx+y);
if(在(xx+x,-yy+y)角上)pset(xx+x,-yy+y);
if(在角(yy+x,-xx+y))pset(yy+x,-xx+y);
yy++;
if(radiusError<0){
半径ROR+=2*yy+1;
}
否则{
xx--;
半径ROR+=2*(yy-xx+1);
}
}
}
弧(50,50,20,0,45);
弧(50,70,20,0,90);
弧(50、90、20、0、180);

只需在
arc
函数的开头添加以下两行:

a1 += 90;
a2 += 90;
const canvas=document.getElementById('canvas');
const ctx=canvas.getContext('2d');
函数pset(x,y){
ctx.fillRect(x,y,1,1);
}
功能弧(x,y,rd,a1=0,a2=360){
a1+=90;//添加此行
a2+=90;//添加此行
设xx=rd;
设yy=0;
设radiusError=1-xx;
角度中的函数(x1,y1){
常数deltaY=y1-y;
常数deltaX=x1-x;
const angleInDegrees=(数学atan2(deltaY,deltaX)*180/数学PI)+180;
返回角度基准>=a1和角度基准=yy){
if(在角(xx+x,yy+y))pset(xx+x,yy+y);
if(在角(yy+x,xx+y))pset(yy+x,xx+y);
如果(在角(-xx+x,yy+y))pset(-xx+x,yy+y);
如果(在角(-yy+x,xx+y))pset(-yy+x,xx+y);
如果(在角(-xx+x,-yy+y))pset(-xx+x,-yy+y);
如果(在角(-yy+x,-xx+y))pset(-yy+x,-xx+y);
if(在(xx+x,-yy+y)角上)pset(xx+x,-yy+y);
if(在角(yy+x,-xx+y))pset(yy+x,-xx+y);
yy++;
if(radiusError<0){
半径ROR+=2*yy+1;
}
否则{
xx--;
半径ROR+=2*(yy-xx+1);
}
}
}
弧(50,50,20,0,45);
弧(50,70,20,0,90);
弧(50、90、20、0、180);

只需在
arc
函数的开头添加以下两行:

a1 += 90;
a2 += 90;
const canvas=document.getElementById('canvas');
const ctx=canvas.getContext('2d');
函数pset(x,y){
ctx.fillRect(x,y,1,1);
}
功能弧(x,y,rd,a1=0,a2=360){
a1+=90;//添加此行
a2+=90;//添加此行
设xx=rd;
设yy=0;
设radiusError=1-xx;
角度中的函数(x1,y1){
常数deltaY=y1-y;
常数deltaX=x1-x;
const angleInDegrees=(数学atan2(deltaY,deltaX)*180/数学PI)+180;
返回角度基准>=a1和角度基准=yy){
if(在角(xx+x,yy+y))pset(xx+x,yy+y);
if(在角(yy+x,xx+y))pset(yy+x,xx+y);
如果(在角(-xx+x,yy+y))pset(-xx+x,yy+y);
如果(在角(-yy+x,xx+y))pset(-yy+x,xx+y);
如果(在角(-xx+x,-yy+y))pset(-xx+x,-yy+y);
如果(在角(-yy+x,-xx+y))pset(-yy+x,-xx+y);
if(在(xx+x,-yy+y)角上)pset(xx+x,-yy+y);
if(在角(yy+x,-xx+y))pset(yy+x,-xx+y);
yy++;
if(radiusError<0){
半径ROR+=2*yy+1;
}
否则{
xx--;
半径ROR+=2*(yy-xx+1);
}
}
}
弧(50,50,20,0,45);
弧(50,70,20,0,90);
弧(50、90、20、0、180);