弧兩點之間：在上面

Question

我寫的Javascript功能，吸引了弧形角度設置爲「0」。它是基於的Bresenham算法圈和，而繪製點，我檢查它們是否在初始和最終角之間。

它工作正常，但角度「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函數的開頭：

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"/>