2点間の弧：上に角度「0」を設定

Question

円を描く関数をJavascriptで記述しました。これはBresenham circleアルゴリズムに基づいており、点を描いている間に最初の角度と最後の角度の間にあるかどうかを確認します。

円の「左端」に角度「0」が表示されていますが、時計回りに角度を計算している間は上にしたいと考えています。これを行う方法？おかげ

const canvas = document.getElementById('canvas'); 
 
const ctx = canvas.getContext('2d'); 
 

 

 
function pset(x, y) { 
 
    ctx.fillRect(x, y, 1, 1); 
 
} 
 

 
function arc (x, y, rd, a1 = 0, a2 = 360) { 
 
    let xx = rd; 
 
    let yy = 0; 
 
    let radiusError = 1 - xx; 
 

 
    function inAngle(x1, y1) { 
 
     const deltaY = y1 - y; 
 
     const deltaX = x1 - x; 
 
     const angleInDegrees = (Math.atan2(deltaY, deltaX) * 180/Math.PI) + 180; 
 

 
     return angleInDegrees >= a1 && angleInDegrees <= a2; 
 
    } 
 

 
    while (xx >= yy) { 
 
     if (inAngle(xx + x, yy + y)) pset(xx + x, yy + y); 
 
     if (inAngle(yy + x, xx + y)) pset(yy + x, xx + y); 
 
     if (inAngle(-xx + x, yy + y)) pset(-xx + x, yy + y); 
 
     if (inAngle(-yy + x, xx + y)) pset(-yy + x, xx + y); 
 
     if (inAngle(-xx + x, -yy + y)) pset(-xx + x, -yy + y); 
 
     if (inAngle(-yy + x, -xx + y)) pset(-yy + x, -xx + y); 
 
     if (inAngle(xx + x, -yy + y)) pset(xx + x, -yy + y); 
 
     if (inAngle(yy + x, -xx + y)) pset(yy + x, -xx + y); 
 

 
     yy++; 
 

 
     if (radiusError < 0) { 
 
      radiusError += 2 * yy + 1; 
 
     } 
 
     else { 
 
      xx--; 
 
      radiusError+= 2 * (yy - xx + 1); 
 
     } 
 
    } 
 
} 
 

 
arc(50, 50, 20, 0, 45); 
 
arc(50, 70, 20, 0, 90); 
 
arc(50, 90, 20, 0, 180);

<canvas width="128" height="128" id="canvas"/>

Answer 1

はちょうどあなたのarc関数の先頭に次の2行を追加します。

a1 += 90; 
a2 += 90; 

const canvas = document.getElementById('canvas'); 
 
const ctx = canvas.getContext('2d'); 
 

 

 
function pset(x, y) { 
 
    ctx.fillRect(x, y, 1, 1); 
 
} 
 

 
function arc (x, y, rd, a1 = 0, a2 = 360) { 
 
    a1 += 90; // add this line 
 
    a2 += 90; // add this line 
 
    let xx = rd; 
 
    let yy = 0; 
 
    let radiusError = 1 - xx; 
 

 
    function inAngle(x1, y1) { 
 
     const deltaY = y1 - y; 
 
     const deltaX = x1 - x; 
 
     const angleInDegrees = (Math.atan2(deltaY, deltaX) * 180/Math.PI) + 180; 
 

 
     return angleInDegrees >= a1 && angleInDegrees <= a2; 
 
    } 
 

 
    while (xx >= yy) { 
 
     if (inAngle(xx + x, yy + y)) pset(xx + x, yy + y); 
 
     if (inAngle(yy + x, xx + y)) pset(yy + x, xx + y); 
 
     if (inAngle(-xx + x, yy + y)) pset(-xx + x, yy + y); 
 
     if (inAngle(-yy + x, xx + y)) pset(-yy + x, xx + y); 
 
     if (inAngle(-xx + x, -yy + y)) pset(-xx + x, -yy + y); 
 
     if (inAngle(-yy + x, -xx + y)) pset(-yy + x, -xx + y); 
 
     if (inAngle(xx + x, -yy + y)) pset(xx + x, -yy + y); 
 
     if (inAngle(yy + x, -xx + y)) pset(yy + x, -xx + y); 
 

 
     yy++; 
 

 
     if (radiusError < 0) { 
 
      radiusError += 2 * yy + 1; 
 
     } 
 
     else { 
 
      xx--; 
 
      radiusError+= 2 * (yy - xx + 1); 
 
     } 
 
    } 
 
} 
 

 
arc(50, 50, 20, 0, 45); 
 
arc(50, 70, 20, 0, 90); 
 
arc(50, 90, 20, 0, 180);

<canvas width="128" height="128" id="canvas"/>